Для размещения информации на странице часто применяются интерактивные элементы, такие, как слайдшоу и спойлеры. Существует множество реализаций слайдеров для разных CMS и Framework-ов типа Bootstrap. Поскольку мы не всегда пользуемся CMS и прочими готовыми решениями, мы сделали собственный вариант слайдера. Данный скрипт был создан нами в ходе работы над одним из веб-проектов.
Изначально задача была простой - дать возможность размещать несколько блоков с произвольной разметкой «поверх» друг друга, чтобы они могли меняться автоматически или по желанию пользователя. Затем к этим требованиям добавились элементы навигации по слайдам, различные функции для работы со слайдером, настройка анимации и т.д. Теперь так же, как и скрипт всплывающего окна Perfect Float Window, мы стали часто использовать этот скрипт в своей работе.
Особенности и возможности
Основным преимуществом этого скрипта является простота его применения и использования. Для создания слайдера на странице необходимо только подготовить правильную разметку и назначить элементам страницы необходимые классы. Всю остальную работу берет на себя скрипт. Наиболее удобен данный подход для тех, кто уже имеет некоторый опыт в работе с разметкой и со стилями CSS, так как для настройки содержимого каждого из слайдов, а также, его контейнера, необходимы некоторые навыки верстки.
Изначально существовали две версии скрипта - с «физическим» сдвигом слайдов при их переключении, и с имитацией сдвига с помощью анимации. Вариант с имитацией сдвига дал больше возможностей по настройке переходов между слайдами, поэтому, на данный момент поддерживается и развивается именно версия с анимацией.
В скрипте реализованы следующие ключевые возможности:
- Зацикленное переключение между слайдами с помощью кнопок навигации и в автоматическом режиме
- Элементы навигации по слайдам - ряд небольших переключателей, соответствующих слайдам
- Событие onChange - функция, вызываемая во время смены слайдов
- 5 видов анимации смены слайда
- Возможность смены интервала переключения слайдов
- Возможность смены скорости анимации
Применение и принцип использования
Для использования слайдера нужно подготовить разметку следующим образом. Общему контейнеру, в котором будут размещены слайды, назначить класс .pl_slider, каждому отдельному слайду - класс .pl_slide. Общему контейнеру можно назначить следующие атрибуты для управления слайдером:
- data-buttons - элементы управления. Атрибут имеет 2 значения (1 - кнопки следующий/предыдущий слайд; 2 - кнопки и элементы навигации по слайдам), отсутсвие атрибута в разметке означает отсутствие элементов управления на слайдере
- data-delay - интервал смены слайдов
- data-animation - вид анимации. На момент написания статьи имеются 5 видов анимации: 0 - сдвиг влево/вправо; 1 - сдвиг вверх/вниз; 2 - сдвиг вверх/вниз с плавным переходом; 3 - плавный переход; 4 - сдвиг влево с плавным переходом
- data-duration - скорость анимации
- data-autoplay - автоматическое воспроизведение
- data-first - первый слайд
При переключении слайдов происходит событие vPerfectSlider.onChange(), на которое можно назначить свою JavaScript-функцию. Текущий слайд имеет класс .active. С помощью этого класса, также, можно установить желаемый слайд первым для отображения, что бывает полезно в тех случаях, когда код страницы генерируется, при этом количество слайдом может быть заранее не известно.
Внешний вид. CSS-стилизация слайдера
Для настройки внешнего вида слайдера следует использовать классы, описанные ниже.
- .pl_slider - контейнер слайдера
- .pl_slide - контейнер одного слайда (по умолчанию имеет размеры слайдера, position: absolute)
- .pl_slider_btns - кнопки следующий/предыдущий слайд
- .pl_slider_btn_left - кнопка «предыдущий слайд»
- .pl_slider_btn_right - кнопка «следующий слайд»
- .pl_slider_pages_wrapper - контейнер для кнопок постраничной навигации
- .pl_slider_pages - кнопка переключения на слайд
- .pl_slider_pages.active - активная кнопка текущего слайда