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

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

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


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


Метки: