Универсальный iview слайдер для сайта

Есть множество слайдеров, которые могут украсить ваш сайт, но то, который мы сейчас будем рассматривать имеет просто огромное количество настроек и опций, которым позавидуют многие аналогичные скрипты.

Iview слайдер является как минимум адаптивным к ширине экрана пользователя, благодаря чему отпадает надобность подстройки css под разные экраны. Единственным минусом слайдера является наличие как минимум 2-х библиотек для нормальной работы скриптов.

Предлагаю рассмотреть все возможности слайдера:

• Есть пагинация слайдов и сайдбар, который показывает сколько времени осталось до смены следующей картинки.
• Можно устанавливать видео вместо картинки.
• Любой слайд может быть ссылкой и иметь подпись
• Есть возможность вывода слайдера с миниатюрами
• Можно регулировать время прокрутки слайдов и менять эффект их смены
• Легко можно менять позиции подписей к слайдам
• Простой css для правки и быстрая установка

Если говорить о параметрах, которые вы сможете самостоятельно задавать в слайдере, то выпишу основные, которые вам могут очень пригодиться.

Заголовки подписей – могут быть с эффектами при появлении. Параметры:

• data-transition – Эффект появления: “wipeLeft”, “wipeRight”, “wipeTop”, “wipeBottom”, “expandLeft”, “expandRight”, “expandTop”, “expandBottom”, “fade”
• data-speed – Время эффекта в миллисекундах “700”
• data-x – Позиция по оси X
• data-y – Позиция по оси Y
• data-width – Ширина подписи
• data-height – Высота подписи

Параметры слайдов

• data-iview:thumbnail – миниатюра
• data-iview:image – сам слайд
• 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”

После скачки исходников выше вы найдете пример подключения слайдов и всех описанных выше параметров, с помощью которых сможете индивидуализировать слайдер под свой сайт.