# Слайдер ## Общая информация Слайдер - отличное дополнение для вашего сайта, когда необходимо показать специальные акции или другое интересное содержимое, которое может быть не только изображением, но и любым HTML контентом. ### Разметка ```html
``` {% embed url="" %} Пример работы кода выше {% endembed %} ## Javascript Данный компонент управляется исключительно с помощью Javascript, по этому какие-либо настройки через атрибуты произвести не удастся. ### Инициализация Для инициализации слайдера необходимо создать экземпляр класса PipUI.Slider. Конструктор данного класса поддерживает 2 параметра: HTMLElement и Object Первый параметр - селектор или объект контейнера слайдера. Второй параметр - объект опций ```html
``` Если произвести просто инициализацию, то слайдер будет пустым, по этому необходимо заполнить его опции, а именно параметр 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: '...' } ``` ### Методы ```javascript 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
--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://v2-0-0.pipui.ru/components/slider.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.