Slick Slider - установка, настройка примеры и документация

Slick Slider - установка, настройка примеры и документация

Slick Slider - установка, настройка примеры и документация

Один из популярнейших слайдеров на Jquery является Slick Slider. И это не мудрено, так как данный плагин умеет очень много. В большинстве случаев вы будите использовать общепринятые модели слайдера, но давайте взглянем на, что способен данный плагин. А способен о на многое. Для начала подключаем файлы стилей к нашему проекту, я буду в примере использовать файлы из CDN вы можете скачать дистрибудив слайдера Slick с офф. сайта или с Github https://github.com/kenwheeler/slick/

Подключаем файлы стилей.


<!-- Добавляем стили из 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>
                

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

1

2

3

4

5

6


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

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

1

2

3

4

5

6

7

8

9


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

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

1

2

3

4

5

6

7

8


                    //Настройки по выводу слайдов в зависимости от разрешения экрана
                    $('.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
                              }
                            }
                          ]
                        });
                

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

200

175

150

300

225

125


                    $('.variable-width').slick({
                      dots: true,
                      infinite: true,
                      speed: 300,
                      slidesToShow: 1,
                      centerMode: true,
                      variableWidth: true
                    });
                

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

1

2

Look ma!

3

Check
this out!

4

Woo!


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

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

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

1

2

3

4

5

6

7

8


                    <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>
                

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

1

2

3

4

5

6

7

8


                    $('.center').slick({
                      centerMode: true,
                      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
                    });
                

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

1

2

3

4

5

6

7

8


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

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


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

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

1


$('.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--;
    }
  });

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

1

2

3

4

5

6

7

8

9

10

11

12


                    $('.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;
                      }
                    });
                

Уничтожить объект

Если ты действительно хочешь быть тем парнем ...


                    //Уничтожить объект слайдера
                    $('.your-slider').slick('unslick');
                

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

1

2

3

4

5

1

2

3

4

5


                    $('.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
                    });
                

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

1

2

3

4

5


                    $('.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 Получить гладкий объект

Теги

Поддержи проект:


...
Сергей
Игорь. Была такая же проблема. В табах слайдеры. Помог реинит.

24/09/2021 03:38:26

...
Игорь
Проблема была в css кому интересно для дива с табом    position: absolute;    left:-9999px; для active    position:relative;    left:0; все варианты перепробовал помог именно этот

22/09/2021 07:02:09

Админ
Админ

Проблема не в CSS. Как решить Вашу задачу я написал сообщением ниже.

22/09/2021 09:33:17

...
Игорь
Ломается слайдер при переключении табов говорят что reinit помогает но не знаю как и куда его писать вот мой код $(document).ready(function(){      $('.content__slider').slick({       dots: true,       arrows: false,     });     $('.tabs').on('click', function (e) {       $(".content__slider").slick('reinit');       });      }); в таком варианте добавляется куча точек dots 

22/09/2021 06:18:41

Админ
Админ

Доброго времени суток. Не знаю зачем Вам реинициализировать Slick Slider, но не суть.

Для того, чтобы слайдер работал корректно нужно сначала уничтожить текуoий объект Slick Slidera и вызвать новый с текущими или новыми параметрами.

	
//Уничтожаем текущий объект
$('.content__slider').slick('unslick');
	

В итоге код должен получиться таким:

	
//Если нажали на Tabs	
$('.tabs').on('click', function (e) {
	//Уничтожаем объект
    $('.content__slider').slick('unslick');
    
	//Инициализируем новый слайдер
    $('.content__slider').slick({
      arrows: true,
      centerPadding: "0px",
      dots: true,
      slidesToShow: 3,
      infinite: false
    });
});
	

22/09/2021 09:28:50

...
Алексе
Доброго времени суток. У меня скрин ридер читает go to slide, как мне его перевести на русский язык. Спасибо большое.

20/09/2021 18:14:49

Админ
Админ

Доброго времени суток.

Боюсь, что никак! Никаких языковых пакетов для Slick Slider не предусмотренны.

20/09/2021 21:10:40

...
Никита
Здравствуйте, а как в slick`е можно реализовать подобную картину c точками : < 1 ... 4 5 6 ... 10 > ? Т.е из десяти dots`ов показать 5, а dots`ы между 1 и 4 , 6 и 10 скрыть многоточиями, чтобы по мере продвижения налево многоточие тоже двигались  и при переходе до последней страницы исчезали : <1 2 3 ... 8 9 10 > <1 2 3 ... 8 9 10 >

13/08/2021 12:54:13

Админ
Админ

Доброго времени суток!

К сожалению такой возможности из коробки нет. У сладера выводится только точки под слайдами.

22/08/2021 12:23:54

...
Алексей
Подскажите пожалуйста, если возможность скрыть стрелки переходов влево вправо если слайдер не на бесконечной прокрутке?  То есть скрыть стрелку влево если влево листать больше нельзя и так же вправо.

09/08/2021 19:42:25

Админ
Админ

Доброго времени суток!

У Slick Slider из коробки есть функционал, что если слайды закончились слева или справа и при этом не стоит, что бесконечная прокрутка, то стрелка становится тусклой и не активной. За это отвечает свойство infinite: false,

Теперь что касаемо вашей задачи, решения как минимум два! 

1) Использовать стили CSS


<style type="text/css">.slick-disabled {
display: none;
}</style>

Но при таком раскладе данный код должен стоять после инициализации слайдера для корректной работы.

Правильней всего использовать события Event Slick Slider в нем можно отследить текущий слайд, сколько всего слайдов и имея эту информацию можно управлять кнопками. Вот пример кода:


$('#slider').slick({
  dots: true,
  infinite: false,
  speed: 100,
  slide: 'div',
  cssEase: 'linear'
});

//По умолчанию стоит первый слайд, кнопку скрываем
if(currentSlide == 0)
	$('.slick-prev').hide();

//Проверяем событие на перемещение слайта
$('#slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  
  	//вычисляем какой следующий слад
	if(nextSlide > 0)
		$('.slick-prev').show();
	if(nextSlide == 0)
		$('.slick-prev').hide();
	
	//Здесь высчитываем общее количество слайдов
	//Так как отсчет от 0 то отнимаем 1 слайд
	if(nextSlide == (slick.slideCount -1))
		$('.slick-next').hide();
	if(nextSlide < (slick.slideCount -1))
		$('.slick-next').show();
});

09/08/2021 22:29:41

...
Ан
так как редактировать сообщение тут нельзя, то вот еще один вопрос) в слайдах слайдера есть ссылки, на эти ссылки навешено событие по клику. при определенном брейкпойнте слайдер перестраивается из 2хрядного в 3хрядный ( в одной колонке было 2 слайда, а стало 3). простые брейкпойнты не сбивают событие, а вот именно перестройка рядов их сбивает(rows: ). и вот когда слайдер перестаивается в другое количество рядов, то событие не работает без перезагрузки страницы, то есть как только слайдер перестроился , то все, ссылки стали просто ссылками и нужно перезагружать страницу, чтоб события вновь заработали. как это можно исправить?

27/07/2021 01:05:13

Админ
Админ

Доброго времени суток!

Если я правильно понял, то у вас проблема с динамическим контентом DOM при работе с JQuery. Для решения Вашей проблемы нудно использовать метод .on()


$( "#dataTable tbody tr" ).on( "click", function() {
  console.log( $( this ).text() );
});

09/08/2021 22:43:03

...
Ан
мой вопрос таков, допустим слайдер по кнопке пролистывает на 1 слайд, но тогда он и по свайпу листает только на 1 слайд. как сделать так, чтобы слайдер по свайпу перелистывал слайды в зависимости от усилия?или на другое количество слайдов, чем по кнопке? то есть допустим чтоб на сенсорном экране можно было свайпом сразу несколько перелистывать, а по кнопке только один.

27/07/2021 00:49:39

Админ
Админ

Доброго времени суток!

Ничего конкретно в данный момент по вашей задаче сказать не могу. Могу посоветовать копать в сторону события swipe


// On swipe event
$('.your-element').on('swipe', function(event, slick, direction){
  console.log(direction);
  // left
});

Попробуйте поиграться с его свойствами.

09/08/2021 22:47:07

...
Zevs
Здраствуйте! А как изменить положение слайда по центру?

21/07/2021 18:12:18

Админ
Админ

Доброго времени сутк. Ваш вопрос не однозначно звучит, если я Вас правильно понял, то вас интересует как разместить слайд по центру относительно других слайдов, т.к. по умолчанию первый слайт встает с левой части экрана. Если да то вот ссылка на код с примером https://bezramok-tlt.ru/blog/posts/slick-slider-ustanovka-nastrojka-primery-i-dokumentaciya#center

21/07/2021 22:24:53

...
Николай
Добрый день, а как дела с пассивными слушателем ивентов? (passive listeners)

20/07/2021 12:17:59

Админ
Админ

Добрый день! Не совсем понял суть Вашего вопроса косающегося Slick Slidera.

20/07/2021 12:34:04


Copyright © 2014 - 2021 All rights reserved.