Удивительный слайдер контента с помощью jQuery | RUDEBOXВ данном уроке мы рассмотрим слайдер изображений с анимированными подписи, отзывчивым интерфейсом и HTML элементами, как видео, IFrame и регулятора. При этом легко добавить неограниченное количество слайдов и заголовков. Используйте его в качестве слайдера изображений, галереи фотографий, ротатора для баннерной рекламы, или даже презентации. Чтобы существенно сократить время загрузки страницы, предварительная загрузка доступна для каждого слайдера, так что изображение будут загружаться постепенно. 

JQuery плагин использует JavaScript для преобразования простого блока HTML в разметку с элегантным слайдером, который можно полностью настроить с помощью HTML5 атрибутов. Слайдер хорошо настроен и прекрасно оптимизированПри использовании этого плагина, макет страницы будет работать даже если JavaScript отключен.

Шаг 1. HTML

Нам необходимо подключить стили и плагины слайдера:

Теперь мы создаем простой каркас с изображениями:

Нам необходимо создать подписи к изображениям, для этого мы будем использовать класс «iview-caption»:

Чтобы вставить видео в слайд нам необходимо создать следующую разметку:

Данный сценарий необходимо инициализировать с помощью функции $(document).ready():

Для каждого примера приведены отдельные стили, рассматривать каждый в отдельности мы не станем, просмотреть код можно в исходниках.

Удивительный слайдер контента с помощью jQuery | RUDEBOX

Шаг 2. JavaScript

Мы добавим некоторые параметры управления по необходимости. Пауза и воспроизведение:

Перейти на нудный слайд:

Кнопки «Назад» и «Вперед»:

Устанавливаем рондомный вывод слайда:

Опции

Ниже мы привели перечень опций, с помощью которых можно настроить слайдер на свое усмотрение:

Слайдер включает в себя 35 эффектов перехода, которые полностью настраиваются и совместимы со всеми основными браузерами (включая IE6 в IE9, Firefox, Chrome, Opera, Safari) и мобильные платформы, такие как IOS / Android.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: