Скрипт «Perfect Slider»

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

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

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

perfectslider.js (~10kb) Актуальная на данный момент версия слайдера.
Perfect Slider Demo (~100kb) Пример использования скрипта, демонстрация работы.
Автор: SpectreZ Работа над проектом: 2016 - 2017 (1 год)
+
Фильтрация по тегам
Выбранные теги отобразятся в этой области...
Найти
Программирование 38, Игры 16, Программы 12, Delphi 29, Библиотеки 15 Веб-разработка 23, Сайты под ключ 7, Дизайн 22, JavaScript 5, PHP 0, Laravel 0, Joomla 2 Графика 30, Обработка фото 6, Логотипы 2, Иллюстрации 7, Рисунки 3, Печатная продукция 2 Видео 11, Трейлеры 1, Анимация 3 Музыка 3, Персонажи 8, Статьи 7, Литература 5, Рассказы 4, Стихи 1, 2D 5, 3D 20, На заказ 10
Используйте среднюю кнопку для быстрого фильтра по тегу...
Календарь проектов
2015 7 , 2016 6 , 2014 3 , 2010 5 , 2011 1 , 2013 2 , 2012 1 , 2009 3 , 2017 3 , 2018 1