Как взаимодействовать с breakpoint в slick slider?

Question

[Артур Левенсон]

Как правильно взаимодействовать с breakpoint в slick. нужно, чтобы слайдер не был активным на ноутбуках и других больших экранах, а был лишь активен на мобильных устройствах и планшетах. подскажите пожалуйста, как это сделать с помощью свойства responsive?

https://codepen.io/kiskiskit/pen/MWowBbW

Answer 1

[depressionofoleg]

С помощью responsive это вряд ли как-то можно сделать, но можно ограничить срабатываение скрипта в зависимости от размера экрана и ресайза.

function mobileOnlySlider() {
    $(document).ready(function(){
            $('.slider').slick({
                slidesToShow:3,
                slidesToScroll: 1,
                centerMode: true,
                centerPadding: '0px',
                speed: 700,
                infinite: true,
                responsive: [
                    {
                        breakpoint: 576,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 1
                        }
                    }
                ]
            });
    })
}

if (window.innerWidth >= 768) {
    mobileOnlySlider();
}

$(window).resize(function() {
    if(window.innerWidth >= 768) {
        if($('.slider').hasClass('slick-initialized')) {
            return;
        }
        mobileOnlySlider();
    } else {
        if($('.slider').hasClass('slick-initialized')) {
            $('.slider').slick('unslick');
        } else {
            return;
        }
    }

Comments

[Сергей delphinpro]

Не надо resize слушать
https://developer.mozilla.org/ru/docs/Web/API/Wind...

[Артур Левенсон]

не работает(

Answer 2

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

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

Comments

[Сергей delphinpro]

Не надо resize слушать
https://developer.mozilla.org/ru/docs/Web/API/Wind...

[Артур Левенсон]

не работает

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

Артур Левенсон, что не работает, я с реального проекта взял.
https://youth-worker.org.ua/
секция библиотека: новые поступления