Slick slider — это jquery плагин для быстрого создания на сайте адаптивного слайдера любой сложности. Его функционал позволяет реализовать зацикливание, автопроигрывание, эффект перехода, динамическое добавление слайдов и многое другое. Отдельно выделю возможность пролистывания слайдера пальцем на мобильных устройствах.
Подключение «slick slider» осуществляется следующим образом.
Рассмотрим примеры вызова плагина с разными настройками.
При вызове без параметров на странице будет один слайд с навигационными стрелками.

Несколько слайдов
В примере выводим 3 слайда с параметрами зацикленной прокрутки (infinite), отображением навигационных точек (dots) и количеством прокручиваемых слайдов за раз.
| $('.multiple-items').slick({ infinite: true, dots: true, slidesToShow: 3, slidesToScroll: 1 }); |

Режим центрирования
В режиме центрирования активный слайд устанавливается по центру с классом «slick-center».
| $('.center').slick({ centerMode: true, slidesToShow: 3, }); |

Адаптивный слайдер
Если на сайте адаптивная верстка, то слайдер можно подстроить под ширину экрана. Для этого используйте свойство «responsive». Оно позволяет установить для разных разрешений свои настройки. Рассмотрим пример.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | $('.slick-example').slick({ infinite: true, dots: true, slidesToShow: 3, slidesToScroll: 1, responsive: [ { breakpoint: 768, settings: { slidesToShow: 2, } }, { breakpoint: 480, settings: { slidesToShow: 1, } } ] }); |
В примере на основном разрешении сайта в ряд выводится 3 слайда. Если ширина видимой области от 768 пикселей до 481, то выводится 2 слайда. И один, если ширина менее 480 пикселей.
В настройках адаптивности можно перечислять любые параметры, не только «slidesToShow». Например, на мобильной версии сайта можно не выводить стрелки навигации или добавить центрирование слайдов.
Настройка slick slider
В таблице приведены основные настройки. Полный перечень на сайте разработчика.
ПАРАМЕТР | ТИП | DEFAULT | ОПИСАНИЕ |
---|
adaptiveHeight | boolean | false | Включает адаптирование высоты для одиночкного слайда горизонтальной карусели |
autoplay | boolean | false | Автоматическая прокрутка |
autoplaySpeed | int(ms) | 3000 | Скорость автопрокрутки в милисекундах |
arrows | boolean | true | Показ/скрытие навигационных кнопок |
prevArrow | html | button | Замена стандартной кнопки Preview |
nextArrow | html | button | Замена стандартной кнопки Next |
dots | boolean | false | Показ/скрытие навигационных точек под слайдером |
draggable | boolean | true | Включает/выключает способность перелистывания слайдера перетаскиванием мышью |
fade | boolean | false | Эффект затухания при перелистывании слайдов |
focusOnSelect | boolean | false | Устанавливает фокус на выбранный элемент карусели при клике |
easing | string | ‘linear’ | Анимационные эффекты перехода, их набор зависит от подключенных jQuery Easing плагинов |
edgeFriction | integer | 0.15 | Сопротивление при попытки прокрутить карусель, когда дальше нет слайдов и она не зацилена |
infinite | boolean | true | Бесконечное прокручивание (зацикливание) |
initialSlide | integer | 0 | Номер слайда, с которого начинать показ |
lazyLoad | string | ‘ondemand’ | Тип подгрузки слайдов. Принимает ‘ondemand’ или ‘progressive’ |
pauseOnHover | boolean | true | Пауза автопроигрывания при наведении мыши |
pauseOnDotsHover | boolean | false | Пауза автопроигрывания при наведении мыши на навигационные точки |
pauseOnHover | boolean | true | Пауза автопроигрывания при наведении мыши |
rows | int | 1 | Может быть ‘window’, ‘slider’ или ‘min’ |
Методы слайдера
Методы — это функции, которые могут совершить со слайдером какое-то действие или сообщить о его текущем состоянии. Метод можно вызывать в любом обработчике javascript, например, при нажатии на кнопку.
slickCurrentSlide — возвращает номер текущего слайда. Отсчёт ведётся с нуля.
| $('.single-item').slick('slickCurrentSlide'); |
slickGoTo — прокручивает на слайд с указанным номером.
| $('.single-item').slick('slickGoTo',4); |
slickNext — прокручивает на один слайд вперёд.
| $('.single-item').slick('slickNext'); |
slickPrev — прокручивает на один слайд назад.
slickPause — останавливает автоматическую прокрутку.
slickPlay — запускает автоматическую прокрутку.
События Slick slider
На некоторые события слайдера можно устанавливать свои обработчики. Например, после прокрутки к 5 слайду мы должны сделать какое-то действие. Для этого включаем обработчик события «afterChange».
| $('#slick-slider').on('afterChange', function(event, slick, currentSlide){ if (currentSlide == 5) { console.log('Осуществлён переход к 5му слайду'); } }); |
Если действие следует совершить перед осуществлением перехода, то задействуем событие «beforeChange».
| $('#slick-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){ console.log('Собираемся осуществить переход к '+nextSlide+' слайду'); }); |