Fotoz
@Fotoz
Начинающий

Как отключить Slick slider?

Нужно отключить слайдер при размере экрана 768 и выше, а ниже 768 включить.
Вот код как сделал я:
$(function() {

$('.s-players').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1,
responsive: [
{
breakpoint: 768,
settings: "unslick"
}
]
});
});

Но здесь получается все наоборот, до 768 работает, а после нет. Подскажите как правильно сделать.
  • Вопрос задан
  • 654 просмотра
Пригласить эксперта
Ответы на вопрос 2
  • А если попробовать отключать на 0, а включать на 769 (Проверить не имею возможности.):
    $(function() {
    
    $('.s-players').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    slidesToScroll: 1,
    responsive: [
    {
    breakpoint: 0,
    settings: "unslick"
    },
    {
      breakpoint: 769,
      setting:{
        speed: 300,
        slidesToShow: 1,
        slidesToScroll: 1,
    
    }
    }
    ]
    });
    });
    Ответ написан
  • @profesor08
    Вот работает. Но надо понимать, что это работает не так как хочется. И если сработал unslick, то надо перезагружаться страницу, чтоб он снова начал работать при большем размере окна.

    $(".single-item").slick({
      dots: true,
      infinite: true,
      speed: 300,
      slidesToShow: 3,
      slidesToScroll: 1,
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: true
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 480,
          settings: "unslick"
        }
      ]
    });


    Но это выглядит неплохо, но реализация могла бы быть и лучше. Поэтому вместо брейкпоинтов в конфиге, лучше самостоятельно контролировать процесс.
    window.addEventListener("resize", function() {
      if (window.innerWidth <= 768) {
        $('.your-slider').slick('unslick');
        sliderIsLive = false;
      }
      else {
        if (sliderIsLive) {
          $('.your-slider').slick();
          sliderIsLive = true;
        }
      }
    });
    Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
KUPIBILET.RU Санкт-Петербург
от 100 000 до 130 000 руб.
HTML Academy Москва
от 85 000 до 100 000 руб.