Слайдер - отличное дополнение для вашего сайта, когда необходимо показать специальные акции или другое интересное содержимое, которое может быть не только изображением, но и любым HTML контентом.
Разметка
<divid="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 =newPipUI.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
Первый параметр - селектор или объект контейнера слайдера.
Если произвести просто инициализацию, то слайдер будет пустым, по этому необходимо заполнить его опции, а именно параметр 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 =newPipUI.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 является приоритетной функцией обратного// вызова перед аналогичной из объекта опций