A
A
Andrey2021-05-22 06:02:27
Slick
Andrey, 2021-05-22 06:02:27

Slick for mobile?

Tell
me there is a block - a container with items
needs to be done so that on screens less than 768px they go into a slider

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Anton Litvinenko, 2021-05-22
@klekovkinandrey

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

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question