Слайдеры, галереи изображений и лайтбоксы / Slick Slider - установка, настройка и примеры

Заметка создана: 13 марта 2024 г.

Slick Slider - один из популярнейших слайдеров на Jquery является.
Для начала подключаем файлы стилей к проекту

  <!-- Добавляем стили из CDN -->
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/slick/slick.css"/>
    <!-- Добавляем тему по умолчанию из CDN -->
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/slick/slick-theme.css"/>

Подключаем сам плагин. Данный код должен быть в самом конце, перед закрывающим тегом <body>

 <script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/slick/slick.min.js"></script>

ПРИМЕРЫ КОДА

Одиночный слайд

 //Иницилизируем слайдер с параметрами по умолчанию
    $('.single-item').slick();

Несколько слайдов

    //Указываем что будем выводить по 3 слайда на экран
    $('.multiple-items').slick({
        infinite: true,
        slidesToShow: 3,   // настраивается здесь - указывается количество слайдов, которое будет видно на странице, а остальные скрыты
        slidesToScroll: 3
    });

Адаптивный слайдер

 //Настройки по выводу слайдов в зависимости от разрешения экрана
    $('.responsive').slick({
        dots: true,
        infinite: false,
        speed: 300,
        slidesToShow: 4,
        slidesToScroll: 4,
        responsive: [       // настраивается здесь - указываются точки адаптации
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    infinite: true,
                    dots: true
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    });

Различная ширина слайдов

   $('.variable-width').slick({
        dots: true,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        centerMode: true,
        variableWidth: true  // настраивается здесь - true или false (по умолчанию)
    });

Различная высота слайдов

$('.one-time').slick({
      dots: true,
      infinite: true,
      speed: 300,
      slidesToShow: 1,
      adaptiveHeight: true
  });

Настройка с Data атрибутом

Начиная с Slick 1.5 можно добавлять настройки, используя атрибут data-slick .Нужно вызвать $(element).slick() , чтобы инициализировать Slick на элементе.

 <div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
      <div><h3>1</h3></div>
      <div><h3>2</h3></div>
      <div><h3>3</h3></div>
      <div><h3>4</h3></div>
      <div><h3>5</h3></div>
      <div><h3>6</h3></div>
  </div>

Режим центрирования слайда

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

 $('.center').slick({
      centerMode: true,  // настраивается здесь - true или false (по умолчанию)
      centerPadding: '60px',
      slidesToShow: 3,
      responsive: [
          {
              breakpoint: 768,
              settings: {
                  arrows: false,
                  centerMode: true,
                  centerPadding: '40px',
                  slidesToShow: 3
              }
          },
          {
          breakpoint: 480,
          settings: {
                  arrows: false,
                  centerMode: true,
                  centerPadding: '40px',
                  slidesToShow: 1
              }
          }
      ]
      });

Ленивая загрузка

// Используйте леневую загрузку устаноиви ее в data-lazy атрибудет
      // В нем укажите источник к файлу в место SRC

      <img data-lazy="img/lazyfonz1.png"/>

      $('.lazy').slick({
          lazyLoad: 'ondemand',
          slidesToShow: 3,
          slidesToScroll: 1
      });

Автоматическая прокрутка

  $('.autoplay').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 2000,
  });

Смена слайдов размытием Fade

 $('.fade').slick({
        dots: true,
        infinite: true,
        speed: 500,
        fade: true,
        cssEase: 'linear'
    });

Добавление и удаление слайдов

 $('.add-remove').slick({
            dots: true,
            slidesToShow: 3,
            speed: 500,
            slidesToScroll: 3
        });
        var slideIndex = 1;
        $('.js-add-slide').on('click', function() {
            slideIndex++;
            $('.add-remove').slick('slickAdd','<div><h3>' + slideIndex + '</h3></div>');
        });

        $('.js-remove-slide').on('click', function() {
            $('.add-remove').slick('slickRemove',slideIndex - 1);
            if (slideIndex !== 0){
            slideIndex--;
        }
    });

Фильтрация слайдов

 $('.filtering').slick({
            slidesToShow: 4,
            slidesToScroll: 4
        });

        var filtered = false;

        $('.js-filter').on('click', function(){
            if (filtered === false) {
                $('.filtering').slick('slickFilter',':even');
                $(this).text('Unfilter Slides');
                filtered = true;
            } else {
                $('.filtering').slick('slickUnfilter');
                $(this).text('Filter Slides');
                filtered = false;
        }
    });

Синхронизация слайдеров

 $('.slider-for').slick({  // слайдер больших изображений
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav'
    });

    $('.slider-nav').slick({   // слайдер превью
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: true,
    centerMode: true,
    focusOnSelect: true
    });

Справа налево

    $('.single-item-rtl').slick({
        rtl: true
    });

НАСТРОЙКИ

Setting	Type	Default	Description
accessibility	boolean	true	Включает вкладки и навигацию по клавишам со стрелками
adaptiveHeight	boolean	false	Обеспечивает адаптивную высоту для односкатных горизонтальных каруселей.
autoplay	boolean	false	Включает автоигру
autoplaySpeed	Int (мс)	3000	Автоигра Скорость в миллисекундах
arrows	boolean	true	Предыдущая / Следующая Стрелки
asNavFor	string	ноль	Установите ползунок для навигации по другому ползунку (имя класса или идентификатора)
appendArrows	string	$(element)	Изменить место прикрепления навигационных стрелок (Selector, htmlString, Array, Element, jQuery object)
appendDots	string	$(element)	Изменить местоположение точек навигации (Selector, htmlString, Array, Element, object jQuery)
prevArrow	string (html \| jQuery селектор) \| объект (узел DOM \| объект jQuery)	<button type = "button" class = "slick-prev"> Предыдущая </ button>	Позволяет выбрать узел или настроить HTML-код для стрелки «Назад».
nextArrow	string (html \| jQuery селектор) \| объект (узел DOM \| объект jQuery)	<button type = "button" class = "slick-next"> Next </ button>	Позволяет выбрать узел или настроить HTML-код для стрелки «Далее».
centerMode	boolean	false	Включает центрированный вид с частичными предыдущими / следующими слайдами. Используйте с нечетным номером слайдов ToShow.
centerPadding	string	'50px'	Боковые отступы в центральном режиме (px или %)
cssEase	string	'ease'	CSS3 Animation Easing
customPaging	function	n/a	Пользовательские шаблоны подкачки. Смотрите источник для примера использования.
dots	boolean	false	Показать точечные индикаторы
dotsClass	string	'slick-dots'	Класс для контейнера точек индикатора слайда
draggable	boolean	true	Включить перетаскивание мышью
fade	boolean	false	Включить затухание
focusOnSelect	boolean	false	Включить фокус на выбранный элемент (нажмите)
easing	string	'linear'	Добавьте ослабление для jQuery animate. Использовать с библиотеками замедления или методами по умолчанию
edgeFriction	integer	0,15	Сопротивление при смахивании краев бесконечной карусели
infinite	boolean	true	Бесконечный цикл скольжения
initialSlide	integer	0	Слайд, чтобы начать
LazyLoad	string	'ondemand'	Установите ленивую технику загрузки. Принимает «по требованию» или «прогрессивный»
mobileFirst	boolean	false	Адаптивные настройки используют мобильный первый расчет
pauseOnFocus	boolean	true	Пауза автозапуска на фокусе
pauseOnHover	boolean	true	Пауза автозапуска при наведении
pauseOnDotsHover	boolean	false	Приостановка автозапуска при наведении точки
respondTo	string	'window'	Ширина, на которую реагирует реагирующий объект. Может быть «окно», «слайдер» или «мин» (меньшее из двух)
responsive	object	none	Объект, содержащий точки останова и объекты настроек (см. Демонстрацию). Включает настройки для заданной ширины экрана. Установите настройки «unlick» вместо объекта, чтобы отключить slick в заданной точке останова.
rows	int	1	Установка более 1 инициализирует режим сетки. Используйте slidesPerRow, чтобы установить, сколько слайдов должно быть в каждой строке.
slide	element	''	Элемент запроса для использования в качестве слайда
slidesPerRow	int	1	С режимом сетки, инициализированным с помощью опции строк, это устанавливает, сколько слайдов в каждой строке сетки. Дверь
slidesToShow	int	1	Количество слайдов для показа
slidesToScroll	int	1	Количество слайдов для прокрутки
speed	Int (мс)	300	Скорость анимации скольжения / затухания
swipe	boolean	true	Включить смахивание
swipeToSlide	boolean	false	Разрешить пользователям перетаскивать или проводить пальцем прямо к слайду независимо от слайдов ToScroll
TouchMove	boolean	true	Включить движение слайдов одним касанием
touchThreshold	int	5	Для продвижения слайдов пользователь должен провести пальцем по длине (1 / touchThreshold) * ширина слайдера
useCSS	boolean	true	Включить / отключить CSS-переходы
useTransform	boolean	true	Включить / отключить CSS-преобразования
variableWidth	boolean	false	Слайды переменной ширины
вертикальный	boolean	false	Режим вертикального скольжения
verticalSwiping	boolean	false	Режим вертикальной прокрутки
rtl	boolean	false	Измените направление ползунка, чтобы стать справа налево
waitForAnimate	boolean	true	Игнорирует запросы на продвижение слайда во время анимации
zIndex	number	1000	Установите значения zIndex для слайдов, полезно для IE9 и ниже

События

Событие	Аргументы	Описание
afterChange	slick, currentSlide	Пожары после смены слайдов
beforeChange	slick, текущий слайд, следующий слайд	Пожары перед сменой слайдов
breakpoint	событие, slick, точка останова	Пожары после достижения точки останова.
destroy	событие, slick	Когда слайдер уничтожен или не скользит.
edge	slick, направление	Запускается, когда ребро прокручивается в бесконечном режиме.
init	slick	Срабатывает после первой инициализации.
reInit	slick	Срабатывает после каждой повторной инициализации
SetPosition	slick	Пожары после изменения положения / размера
swipe	slick, направление	Пожары после удара / перетаскивания
lazyLoaded	событие, slick, изображение, imageSource	Срабатывает после загрузки изображения лениво
lazyLoadError	событие, slick, изображение, imageSource	Срабатывает после того, как изображение не загружается

Методы

Методы
Метод	Аргументы	Описание
slickCurrentSlide	none	Возвращает текущий индекс слайда
slickGoTo	int: номер слайда, логическое значение: не анимировать	Переходит к слайду по индексу
slickNext	none	Переходит к следующему слайду
slickPrev	none	Переходит к предыдущему слайду
slickPause	none	Паузы автовоспроизведения
slickPlay	none	Запускает автозапуск
slickAdd	HTML или DOM объект, индекс, addBefore	объект
slickRemove	index, removeBefore	Если для removeBefore задано значение false, удалите указатель, следующий за слайдом, или последний слайд, если индекс не установлен.
slickFilter	Селектор или функция	Фильтрует слайды, используя jQuery .filter ()
slickUnfilter	index	Удаляет примененную фильтрацию
slickGetOption	опция: string	Получает индивидуальное значение параметра.
slickSetOption	опция: string, значение: зависит от опции, refresh: логическое значение	Установите для параметра true значение true, если это обновление пользовательского интерфейса.
unslick	none	Разрушает slick
getSlick	none	Получить гладкий объект

JavaScript / jQuery

*
* SLICK SLIDER 1.9.0 slick.min.js
*

Стили CSS

/* SLICK SLIDER 1.9.0 slick.css */
.slick-slider
{
position: relative;

display: block;
box-sizing: border-box;

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}

.slick-list
{
position: relative;

display: block;
overflow: hidden;

margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

.slick-track
{
position: relative;
top: 0;
left: 0;

display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;

content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}

.slick-slide
{
display: none;
float: left;

height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;

height: auto;

border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}

/* SLICK SLIDER 1.9.0 slick.scss */

.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;

&:focus {
outline: none;
}

&.dragging {
cursor: pointer;
cursor: hand;
}
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
margin-left: auto;
margin-right: auto;

&:before,
&:after {
content: "";
display: table;
}

&:after {
clear: both;
}

.slick-loading & {
visibility: hidden;
}
}
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
[dir="rtl"] & {
float: right;
}
img {
display: block;
}
&.slick-loading img {
display: none;
}

display: none;

&.dragging img {
pointer-events: none;
}

.slick-initialized & {
display: block;
}

.slick-loading & {
visibility: hidden;
}

.slick-vertical & {
display: block;
height: auto;
border: 1px solid transparent;
}
}
.slick-arrow.slick-hidden {
display: none;
}

/* SLICK SLIDER 1.9.0 slick-theme.css */

@charset "UTF-8";
/* Slider */
.slick-loading .slick-list
{
background: #fff url('./ajax-loader.gif') center center no-repeat;
}

/* Icons */
@font-face
{
font-family: 'slick';
font-weight: normal;
font-style: normal;
font-display: swap;

src: url('./fonts/slick.eot');
src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
font-size: 0;
line-height: 0;

position: absolute;
top: 50%;

display: block;

width: 20px;
height: 20px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);

cursor: pointer;

color: transparent;
border: none;
outline: none;
background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
color: transparent;
outline: none;
background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
font-family: 'slick';
font-size: 20px;
line-height: 1;

opacity: .75;
color: white;

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
left: -25px;
}
[dir='rtl'] .slick-prev
{
right: -25px;
left: auto;
}
.slick-prev:before
{
content: '←';
}
[dir='rtl'] .slick-prev:before
{
content: '→';
}

.slick-next
{
right: -25px;
}
[dir='rtl'] .slick-next
{
right: auto;
left: -25px;
}
.slick-next:before
{
content: '→';
}
[dir='rtl'] .slick-next:before
{
content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
margin-bottom: 30px;
}

.slick-dots
{
position: absolute;
bottom: -25px;

display: block;

width: 100%;
padding: 0;
margin: 0;

list-style: none;

text-align: center;
}
.slick-dots li
{
position: relative;

display: inline-block;

width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;

cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 0;

display: block;

width: 20px;
height: 20px;
padding: 5px;

cursor: pointer;

color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
}
.slick-dots li button:before
{
font-family: 'slick';
font-size: 6px;
line-height: 20px;

position: absolute;
top: 0;
left: 0;

width: 20px;
height: 20px;

content: '•';
text-align: center;

opacity: .25;
color: black;

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
opacity: .75;
color: black;
}

/* SLICK SLIDER 1.9.0 slick-theme.scss */

@charset "UTF-8";

// Default Variables

// Slick icon entity codes outputs the following
// "\2190" outputs ascii character "←"
// "\2192" outputs ascii character "→"
// "\2022" outputs ascii character "•"

$slick-font-path: "./fonts/" !default;
$slick-font-family: "slick" !default;
$slick-loader-path: "./" !default;
$slick-arrow-color: white !default;
$slick-dot-color: black !default;
$slick-dot-color-active: $slick-dot-color !default;
$slick-prev-character: "\2190" !default;
$slick-next-character: "\2192" !default;
$slick-dot-character: "\2022" !default;
$slick-dot-size: 6px !default;
$slick-opacity-default: 0.75 !default;
$slick-opacity-on-hover: 1 !default;
$slick-opacity-not-active: 0.25 !default;

@function slick-image-url($url) {
@if function-exists(image-url) {
@return image-url($url);
}
@else {
@return url($slick-loader-path + $url);
}
}

@function slick-font-url($url) {
@if function-exists(font-url) {
@return font-url($url);
}
@else {
@return url($slick-font-path + $url);
}
}

/* Slider */

.slick-list {
.slick-loading & {
background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
}
}

/* Icons */
@if $slick-font-family == "slick" {
@font-face {
font-family: "slick";
src: slick-font-url("slick.eot");
src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg");
font-weight: normal;
font-style: normal;
}
}

/* Arrows */

.slick-prev,
.slick-next {
position: absolute;
display: block;
height: 20px;
width: 20px;
line-height: 0px;
font-size: 0px;
cursor: pointer;
background: transparent;
color: transparent;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
padding: 0;
border: none;
outline: none;
&:hover, &:focus {
outline: none;
background: transparent;
color: transparent;
&:before {
opacity: $slick-opacity-on-hover;
}
}
&.slick-disabled:before {
opacity: $slick-opacity-not-active;
}
&:before {
font-family: $slick-font-family;
font-size: 20px;
line-height: 1;
color: $slick-arrow-color;
opacity: $slick-opacity-default;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}

.slick-prev {
left: -25px;
[dir="rtl"] & {
left: auto;
right: -25px;
}
&:before {
content: $slick-prev-character;
[dir="rtl"] & {
content: $slick-next-character;
}
}
}

.slick-next {
right: -25px;
[dir="rtl"] & {
left: -25px;
right: auto;
}
&:before {
content: $slick-next-character;
[dir="rtl"] & {
content: $slick-prev-character;
}
}
}

/* Dots */

.slick-dotted.slick-slider {
margin-bottom: 30px;
}

.slick-dots {
position: absolute;
bottom: -25px;
list-style: none;
display: block;
text-align: center;
padding: 0;
margin: 0;
width: 100%;
li {
position: relative;
display: inline-block;
height: 20px;
width: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
button {
border: 0;
background: transparent;
display: block;
height: 20px;
width: 20px;
outline: none;
line-height: 0px;
font-size: 0px;
color: transparent;
padding: 5px;
cursor: pointer;
&:hover, &:focus {
outline: none;
&:before {
opacity: $slick-opacity-on-hover;
}
}
&:before {
position: absolute;
top: 0;
left: 0;
content: $slick-dot-character;
width: 20px;
height: 20px;
font-family: $slick-font-family;
font-size: $slick-dot-size;
line-height: 20px;
text-align: center;
color: $slick-dot-color;
opacity: $slick-opacity-not-active;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
&.slick-active button:before {
color: $slick-dot-color-active;
opacity: $slick-opacity-default;
}
}
}

Слайдер