Slick для мобильных устройств?

Question

[an]

Подскажите
есть блок - контейнер с итемами
нужно сделать что бы на экранах меньше 768px переходили в слайдер

Comments

[Konfy]

Секция Responsive Display

https://kenwheeler.github.io/slick/#:~:text=$('.re...

Answer 1

[Антон Литвиненко]

$(window).on('resize', function(e){
  // Переменная, по которой узнаем запущен слайдер или нет.
  var initLib = $('.library-slider').data('init-slider');

  if(window.innerWidth < 768){
    // Если слайдер не запущен
    if(initLib != 1){
      // Запускаем слайдер и записываем в data init-slider = 1
      $('.library-slider').slick({
        arrows: false,
        dots: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        responsive: [
          {
            breakpoint: 576,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 1,
            }
          },
          {
            breakpoint: 480,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1,
            }
          }
        ]
      }).data({'init-slider': 1});
    }
  }
  // Если десктоп
  else {
    // Если слайдер запущен
    if(initLib == 1){
      // Разрушаем слайдер и записываем в data init-slider = 0
      $('.library-slider').slick('unslick').data({'init-slider': 0});
    }
  }
}).trigger('resize')