Рубрика: Дизайн

iView — адаптивный jQuery слайдер

 

Плагин для создания красивейших слайдеров — iView. Множество настроек, навигация, таймер, API, поддержка touch устройств, вставка видео и адаптивность.

HTML разметка

В head подключаем необходимые файлы для работы плагина:

В тело документа вставьте секцию слайдера (или слайдеров):

Вы можете добавить Заголовок для каждого слайда. Для этого добавьте div с классом «iview-caption» в div приведенный выше:

При добавлении html5 атрибута data-attribute к div с классом «iview-caption«, вы можете указать эффект, который будет использоваться для Заголовка. Возможные эффекты: «wipeLeft«, «wipeRight«, «wipeTop«, «wipeBottom«, «expandLeft«, «expandRight«, «expandTop«, «expandBottom«, «fade«.

Заголовок может иметь data-transition с параметром «fade«, в этом случае он будет показываться с эффектом fade.

Доступны ещё такие HTML5 атрибуты:

  • data-transition — возможные эффекты перехода: «wipeLeft«, «wipeRight«, «wipeTop«, «wipeBottom«, «expandLeft«, «expandRight«, «expandTop«, «expandBottom«, «fade«
  • data-easing — полный список доступен тут
  • data-speed — скорость переходов мс.
  • data-x — позиция Заголовка по координате X в px.
  • data-y — позиция Заголовка по координате Y в px.
  • data-width — ширина Заголовка в px, если не указана будет использоваться исходная ширина Заголовка.
  • data-height — высота Заголовка в px, если не указана будет использоваться исходная высота Заголовка.

Видео

Чтобы использовать в вашем слайдшоу видео, нужно вставить iframe в один из ваших слайдов:

Как вы можете заметить, мы задали ширину iframe 100%, таким образом видео будет изменять свой размер в соответствии с размерами слайдшоу.
И окончательно вам нужно теперь инициализировать плагин, то есть указать к какому селектору его применять:

Доступные опции.

Доступные значения эффектов для опции fx:

  • random
  • strip-down-right
  • strip-down-left
  • strip-up-right
  • strip-up-left
  • strip-up-down
  • strip-up-down-left
  • strip-left-right
  • strip-left-right-down
  • slide-in-right
  • slide-in-left
  • slide-in-up
  • slide-in-down
  • left-curtain
  • right-curtain
  • top-curtain
  • bottom-curtain
  • fade
  • block-random
  • block-fade
  • block-fade-reverse
  • block-expand
  • block-expand-reverse
  • block-expand-random
  • block-drop-random
  • zigzag-top
  • zigzag-bottom
  • zigzag-grow-top
  • zigzag-grow-bottom
  • zigzag-drop-top
  • zigzag-drop-bottom
  • strip-left-fade
  • strip-right-fade
  • strip-top-fade
  • strip-bottom-fade

HTML5 атрибуты data-

URL ссылка изображения в слайдере добавляется с помощью html5 атрибута data-. Это позволяет загрузить изображение только тогда, когда слайдшоу обращается к нему (lazy load метод).
С помощью html5 атрибутов вы можете добавить множество свойств для слайда, чтобы перезаписать общие.
Например, URL для миниатюр:

или эффект перехода, только для одного слайда:

Вы можете установить случайные переходы из множества эффектов:

Ниже приведены все доступные атрибуты data-:

  • data-iview:transition — тип перехода: «strip-down-right», «strip-down-left», «strip-up-right», «strip-up-left», «strip-up-down», «strip-up-down-left», «strip-left-right», «strip-left-right-down», «slide-in-right», «slide-in-left», «slide-in-up», «slide-in-down», «left-curtain», «right-curtain», «top-curtain», «bottom-curtain», «fade», «block-random», «block-fade», «block-fade-reverse», «block-expand», «block-expand-reverse», «block-expand-random», «block-drop-random», «zigzag-top», «zigzag-bottom», «zigzag-grow-top», «zigzag-grow-bottom», «zigzag-drop-top», «zigzag-drop-bottom», «strip-left-fade», «strip-right-fade», «strip-top-fade», «strip-bottom-fade»
  • data-iview:easing — полный список easing эффектов тут
  • data-iview:imageURL изображение слайда
  • data-iview:thumbnailURL миниатюры слайда (если значение опции ‘controlNavThumbs‘ установлено, как true)
  • data-iview:pausetime — Задержка в мс между концом исползуемого эффекта и началом следующего
  • data-iview:type — тип слайда (установите для video, чтобы оптимизировать слайдер для показа видео роликов)

CSS

В этом примере мы используем два CSS файла. Один содержит некоторые общие стили, такие как цвета ссылок, размеры шрифтов и т.д. для страницы.
Другой файл содержит все специфические стили скрипта:

javascript

Как сделать Паузу и Плей слайдера?

Как сменить слайд?

 

Как перейти к следующему или предыдущему слайду?

Как установить показ со случайного слайда?

СКАЧАТЬ
iprodev-iView

ДЕМОПосмотреть
пример


Связанные посты:


Метки: