material

Perfect Slider

Теги: Веб-разработка, JavaScript, Библиотеки

Часто для размещения информации на странице часто применяются интерактивные элементы, такие как слайдшоу и спойлеры. Существует множество реализаций слайдеров для разных CMS и Framework-ов типа Bootstrap. Поскольку мы не всегда пользуемся CMS и прочими готовыми решениями, мы сделали собственный вариант слайдера. Данный скрипт был разработан нами в ходе работы над одним из веб-проектов.

Изначально задача была простой - дать возможность размещать несколько блоков с произвольной разметкой «поверх» друг друга, чтобы они могли меняться автоматически или по желанию пользователя. Затем к этим требованиям добавились элементы навигации по слайдам, различные функции для работы со слайдером, настройка анимации и т.д. Теперь так же, как и скрипт всплывающего окна Perfect Float Window, мы стали часто использовать этот скрипт в своей работе.

Особенности и возможности

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

Изначально существовали две версии скрипта - с «физическим» сдвигом слайдов при их переключении, и с имитацией сдвига с помощью анимации. Вариант с имитацией сдвига дал больше возможностей по настройке переходов между слайдами, поэтому, на данный момент поддерживается и развивается именно версия с анимацией.

В скрипте реализованы следующие ключевые возможности:

  1. Зацикленное переключение между слайдами с помощью кнопок навигации и в автоматическом режиме
  2. Элементы навигации по слайдам - ряд небольших переключателей, соответствующих слайдам
  3. Событие onChange - функция, вызываемая во время смены слайдов
  4. 5 видов анимации смены слайда
  5. Возможность смены интервала переключения слайдов
  6. Возможность смены скорости анимации

Применение и принцип использования

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

Скачать скрипт

1 из 2: perfectslider.js
Скачать размер: ~10kb

Актуальная на данный момент версия слайдера.

2 из 2: Perfect Slider Demo
Скачать размер: 1.15mb

Пример использования скрипта, демонстрация работы.

автор: SpectreZ работа над проектом: 2016-2017 (1 год)

Очень полезный скрипт, равно как и «Perfect Float Window» в соседнем проекте. Использовали его как в своих личных проектах, так и по работе, в том числе, при создании сайтов на системе Bitrix. Одно из самых полезных и, вместе с тем, простых в использовании решений за все время нашей работы.

Комментарий от SaiLight
выложено уже 40 проектов из 124 созданных команда Perfect Light, 2017 год