Слайдер

Общая информация

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

Разметка

<div id="slider"></div>

<script>
    let someHtml = '<h3 class="pb-20">HTML Slide</h3>'
        + 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>'
        + 'Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br>'
        + 'It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br>'
        + 'It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'
        + '<br><br><hr><br>'
        + '<ol class="px-20"><li>Line #1</li><li>Line #2</li><li>Line #3</li></ol>';

    let slider = new PipUI.Slider('#slider', {
        slides: [
            {img: "https://cdn.pipui.ru/media/images/slider/1.webp"},
            {img: "https://cdn.pipui.ru/media/images/slider/2.webp"},
            {img: "https://cdn.pipui.ru/media/images/slider/3.webp"},
            {img: "https://cdn.pipui.ru/media/images/slider/4.webp"},
            {content: someHtml},
            {img: "https://cdn.pipui.ru/media/images/slider/5.webp", content: someHtml}
        ]
    });
</script>

Javascript

Данный компонент управляется исключительно с помощью Javascript, по этому какие-либо настройки через атрибуты произвести не удастся.

Инициализация

Для инициализации слайдера необходимо создать экземпляр класса PipUI.Slider.

Конструктор данного класса поддерживает 2 параметра: HTMLElement и Object

Первый параметр - селектор или объект контейнера слайдера.

Второй параметр - объект опций

<div id="slider"></div>

<script>
    let slider = new PipUI.Slider('#slider');
</script>

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

Опции

// Выводить в консоль отладку
debug: false

// Массив слайдов
// Каждый элемент слайдов может представлять собой объект, состоящий из
// параметра img или content, которые являются не обязательными.
// img - ссылка на изображение
// content - HTML содержимое
slides: []

// Функция обратного вызова, срабатываемая при обновлении слайдера
updateCallback: undefined

// Функция обратного вызова, срабатываемая при изменении слайда
changeCallback: undefined

// Функция обратного вызова, срабатываемая при паузе
pauseCallback: undefined

// Функция обратного вызова, срабатываемая при возобновлении после паузе
resumeCallback: undefined

// Функция обратного вызова, срабатываемая при старте
playCallback: undefined

// Задержка при изменении слайда на следующей.
// Если установить 0, то слайды не будут переключаться автоматически.
duration: 3000

// Анимация переключения слайда
animation: 'slide'

// Отображать ли стрелочки переключения на предыдущий и следующий слайды
arrows: true

// Отображать ли элементы переключения по имеющимся слайдам
labels: true

// Можно ли использовать паузу при наведении
pause: true

// Шаблоны слайдера
templates: {
	// Контейнер списка слайдов
	list: '...'
	
	// Блок слайда
	slide: '...'
	
	// Стрелка переключения на предыдущий слайд
	arrowLeft: '...'
	
	// Стрелка переключения на следующий слайд
	arrowRight: '...'
	
	// Элемент переключения по имеющимся слайдам
	label: '...'
}

Методы

let slider = new PipUI.Slider('#slider');

slider.getID() // Вернет уникальный идентификатор слайдера

slider.setOptions(object) // Изменить опции слайдера

slider.getOptions() // Получить опции слайдера

slider.update(callback) // Обновить слайдер
// Параметр callback является приоритетной функцией обратного
// вызова перед аналогичной из объекта опций

slider.setSlide(index, callback) // Изменить слайд на указанный
// Параметр index - целое число, начиная от 0
// Параметр callback является приоритетной функцией обратного
// вызова перед функцией changeCallback из объекта опций

slider.next(callback) // Изменить слайд на следующий
// Параметр callback является приоритетной функцией обратного
// вызова перед функцией changeCallback из объекта опций

slider.prev(callback) // Изменить слайд на предыдущий
// Параметр callback является приоритетной функцией обратного
// вызова перед функцией changeCallback из объекта опций

slider.pause(callback) // Поставить слайдер на паузу
// Параметр callback является приоритетной функцией обратного
// вызова перед аналогичной из объекта опций

slider.resume(callback) // Запустить слайдер после паузы
// Параметр callback является приоритетной функцией обратного
// вызова перед аналогичной из объекта опций

slider.play(delay, clear, callback) // Запустить слайдер с доп. параметрами
// Параметр delay указывает задержку переключения
// Параметр clear очищает предыдущие параметры
// Параметр callback является приоритетной функцией обратного
// вызова перед аналогичной из объекта опций

События

ТриггерОписаниеИнициатор

update-slider-pipui

Срабатывает при обновлении слайдера

.slider

change-slider-pipui

Срабатывает при изменении слайда

.slider

pause-slider-pipui

Срабатывает при выставлении паузы

.slider

resume-slider-pipui

Срабатывает при запуске после паузы

.slider

play-slider-pipui

Срабатывает при запуске слайдера(обычно после паузы с определенной задержкой)

.slider

PreviousВсплывающие блокиNextАвтозаполнение

Last updated