Есть множество слайдеров, которые могут украсить ваш сайт, но то, который мы сейчас будем рассматривать имеет просто огромное количество настроек и опций, которым позавидуют многие аналогичные скрипты.
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"
После скачки исходников выше вы найдете пример подключения слайдов и всех описанных выше параметров, с помощью которых сможете индивидуализировать слайдер под свой сайт.
