Slick slider
Slick slider — это jquery плагин для быстрого создания на сайте адаптивного слайдера любой сложности. Его функционал позволяет реализовать зацикливание, автопроигрывание, эффект перехода, динамическое добавление слайдов и многое другое. Отдельно выделю возможность пролистывания слайдера пальцем на мобильных устройствах.
Подключение «slick slider» осуществляется следующим образом.
1 2 3 4 | <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="/slick/slick.min.js"></script> <link rel="stylesheet" type="text/css" href="/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="/slick/slick-theme.css"/> |
Jquery подгружаем только если на сайте его ещё нет.
Каждый слайд оборачивается в «div», внутри которого может быть любое содержимое:
1 2 3 4 5 6 7 8 | <div class="slider single-item"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> |
Примеры использования «slick slider»
Рассмотрим примеры вызова плагина с разными настройками.
Вызов без параметров
При вызове без параметров на странице будет один слайд с навигационными стрелками.
1 | $('.single-item').slick(); |
Несколько слайдов
В примере выводим 3 слайда с параметрами зацикленной прокрутки (infinite), отображением навигационных точек (dots) и количеством прокручиваемых слайдов за раз.
1 2 3 4 5 6 | $('.multiple-items').slick({ infinite: true, dots: true, slidesToShow: 3, slidesToScroll: 1 }); |
Режим центрирования
В режиме центрирования активный слайд устанавливается по центру с классом «slick-center».
1 2 3 4 | $('.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 — возвращает номер текущего слайда. Отсчёт ведётся с нуля.
1 | $('.single-item').slick('slickCurrentSlide'); |
slickGoTo — прокручивает на слайд с указанным номером.
1 | $('.single-item').slick('slickGoTo',4); |
slickNext — прокручивает на один слайд вперёд.
1 | $('.single-item').slick('slickNext'); |
slickPrev — прокручивает на один слайд назад.
slickPause — останавливает автоматическую прокрутку.
slickPlay — запускает автоматическую прокрутку.
События Slick slider
На некоторые события слайдера можно устанавливать свои обработчики. Например, после прокрутки к 5 слайду мы должны сделать какое-то действие. Для этого включаем обработчик события «afterChange».
1 2 3 | $('#slick-slider').on('afterChange', function(event, slick, currentSlide){ if (currentSlide == 5) { console.log('Осуществлён переход к 5му слайду'); } }); |
Если действие следует совершить перед осуществлением перехода, то задействуем событие «beforeChange».
1 2 3 | $('#slick-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){ console.log('Собираемся осуществить переход к '+nextSlide+' слайду'); }); |