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>
  

Список возможностей использования Slick Slider

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

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

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

No-name
Иван
Здравствуйте! Я сделал слайдер в попапе, но при первом открытии попапа у меня текст всех элементов слайдера сливается в один + при первом действии со слайдером после первого элемента ничего не идёт, но после первого действия слайдер начинает работать как надо и текст отображается правильно. Что делать, чтобы при открытии попапа слайдер сразу работал нужным образом?

12/01/2023 02:19:59

Админ
Админ

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

Честно незнаю чем вам помочь! Могу посоветовать обратиться на специализированные форумы для решения конкретно вашей проблемы.

01/02/2023 21:33:11

No-name
Lena
Здравствуйте, нигде не могу найти документацию как настраивать пагинацию. Подскажите если не затруднит

27/12/2022 01:30:23

Админ
Админ

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

Если вы про точки под слайдами, то они появляются автоматически исходя из количества слайдов. За это отвечает свойство DOTS тип boolean по умолчанию FALSE (не показываются)

01/02/2023 21:27:33

No-name
Наталья
Здравствуйте. У меня проблема с отображением слайдеров в табах. Работают они по принципу переключения display:block; и display:none. При переходе на новый таб, ширина слайдов равна нулю. Но стоит его начать прокручивать, всё отображается нормально. Вариант решения с реинициализацией мне не подходит, так как загрузка фото в слайдере происходит очень долго и они не отображаются все сразу. Подскажите, пожалуйста, как можно решить данную проблему?

22/11/2022 18:03:06

No-name
Александр
Добрый день! Подскажите, пожалуйста, как выровнять слайды по центру относительно горизонтальной ось (слайды разной высоты и прижимаются к верху)

31/10/2022 17:18:16

Админ
Админ

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

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

01/11/2022 22:11:38

No-name
Алексей
Здравствуйте. На сколько я понял, слайдер писался во времена jQuery 2.2.0, но на моем сайте на данный момент используется  3.6.0 и с этой версией слайдер не работает. И версию 2.2.0 не могу использовать, т.к. тогда сайт местами начинает не правильно работать. Как решить проблему?

23/10/2022 03:59:00

Админ
Админ

У меня на данном сайте подключена Jquery 3.6.0 и как видите слайдер отлично работает. Посмотрите ошибки в консоли браузера, возможно вам это поможет.

23/10/2022 10:18:24

No-name
Александр
В мобильной версии не работает перетаскивание видосов с ютуба, что нужно сделать чтобы можно было их перетаскивать?

21/10/2022 12:00:17

Админ
Админ

Вы имеете ввиду, что на мобильном устройстве слайды с видео у вас не листаются?

21/10/2022 14:02:57

No-name
Марина
Добрый день. Сайт сверстан на последнем bootstrap 5.2 -- https://yarkoteam.tmweb.ru/. Есть слайдер с отзывами -- слайдер со стрелками после блока "Уже помогли с продажами в" -- #reviews, элементы -- .review-item Для десктопа (до 960px) необходимо показывать 2 слайда видимыми, остальные -- скрытыми в режиме бесконечной прокрутки. Проблемы:  1) Пролистывается почему-то по 1 слайду, а не по 2, хотя в настройках указано slidesToShow: 2, slidesToScroll: 2 2) Если пролистывать в правую сторону, то после последнего слайда (Аюведа) слайдер зависает (на короткое время все слайды пропадают, и только потом появляются заново). Если пролистывать в левую сторону, то слайдер зависает сразу после первого слайда. Помогите, пожалуйста, понять, в чем причина, и в какую сторону копать, чтобы устранить этот эффект. js-код работы слайдера приведен ниже:
.review-item {
   padding: 50px 30px;
   opacity: 0;
}
$('#reviews').slick({
    lazyLoad: 'ondemand',
    infinite: true,
    initialSlide: 1,
    centerMode: true,
    centerPadding: '130px',
    slidesToShow: 2,
    slidesToScroll: 2,
    prevArrow: '<a class="slick-prev"></a>',
    nextArrow: '<a class="slick-next"></a>',
    responsive: [{
        breakpoint: 961,
        settings: {
            infinite: false,
            slidesToShow: 1,
            slidesToScroll: 1,
            centerMode: true,
            centerPadding: '100px',
        }
    }
});
if (window.screen.width > 960) {
    $('#reviews').on('beforeChange', function(event, { slideCount: count }, currentSlide, nextSlide) {
        let prevSlide;
        if (currentSlide == count - 1 && nextSlide == 0) {
            prevSlide = currentSlide - count;
        } else if (currentSlide == 1 && nextSlide == 0) {
            prevSlide = nextSlide - currentSlide;
        } else if (currentSlide == 0 && nextSlide == count - 1) {
            prevSlide = nextSlide - 1;
        } else {
            if (currentSlide < nextSlide) {
                prevSlide = currentSlide;
            } else { 
                prevSlide = nextSlide - 1;
            }
        }
        let selectors = [prevSlide, nextSlide].map(n => `[data-slick-index="${n}"]`).join(', ');
        $('.opacity-100').removeClass('opacity-100');
        $(selectors).addClass('opacity-100');
    });
  
    $('#reviews [data-slick-index="0"]').addClass('opacity-100');
    $('#reviews [data-slick-index="1"]').addClass('opacity-100');
} else {
    $('#reviews').on('beforeChange', function(event, { slideCount: count }, currentSlide, nextSlide) {
        let selectors = [nextSlide].map(n => `[data-slick-index="${n}"]`).join(', ');
        $('.opacity-100').removeClass('opacity-100');
        $(selectors).addClass('opacity-100');
    });
    $('#reviews [data-slick-index="1"]').addClass('opacity-100');
}

04/10/2022 15:08:55

No-name
Иван
Добрый! Может подскажет кто. Карусель имеет слайдов меньше (допустим 3), чем размер вьюпорта (допустим slidesToShow = 7). Установлена variableWidth = true и бесконечная прокрутка. На выходе имеем, что слайды начинают повторяться, т.е. после слайдов 1-2-3 идут их клоны и получаю 1-2-3-клон1-клон2-клон3-клон1 и слайдер позволяет их крутить. Такое поведение не интересно. Я заранее не знаю сколько будет слайдов, т.е. в этом случае мне слайдер ничего крутить не должен. И второй момент связан с этим же. Если допустим размер вьюпорта на лету становится больше числа слайдов, то слайдер должен отключаться и наоборот, при уменьшении вьюпорта до размеров, когда слайды в него не влезают должен включаться функционал прокрутки, включая кнопки прокрутки. В последнем случае tiny-slider работает так, как нужно, просто у него есть другие проблемы в другом месте, а не хочется тащить на сайт 2 слайдера для схожих целей. Вопрос: такое поведение можно как-то настройками реализовать или надо заморачиваться на JS?

30/09/2022 23:50:27

Админ
Админ

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

Используйте события в сладере для новой иницилизации для ваших нужд. Придется еще дописать логику на JS или PHP все зависит от вашей реализации проекта.

 

03/10/2022 11:09:47

No-name
Кирилл
Здравствуйте. Слайдер почему-то отображает только 10 картинок. Внутри кода есть, но анимация перепрыгивает на первый слайд. Не знаю куда уже копать. Подскажите.

17/07/2022 20:03:55

Админ
Админ

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

Не совсем понят, что вам нужно, если можете пришлите ссылку на сайт (если он опубликован в сети) или скриншоту, видео на почту  mail@bezramok-tlt.ru

21/07/2022 12:04:50

No-name
Aviseen
Добрый день! Уже обсуждалось ниже по комментариям, но там ответа нет. Вопрос: как сделать, чтобы можно было свайпать выбранное кол-во мышью, а не заданное жестко через св-во slidesToScroll?  В документации есть св-во swipeToSlide, но оно не работает почему-то. Уже предлагали поиграться с:
    $('.slider-detail-nav').on('swipe', function(event, slick, direction){
      console.log(slick);
      // left
    });
Но нужен детальный разбор как это сделать. Может есть готовый код для этого? 

08/05/2022 21:29:28

Админ
Админ

Добрый день.

Если я Вас правильно понял, то воспользуйтесь опцией swipeToSlide переведя ее в состояние true.

14/05/2022 13:15:00


Copyright © 2014 - 2023 All rights reserved.