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

Question

[Андрей]

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

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

Но здесь получается все наоборот, до 768 работает, а после нет. Подскажите как правильно сделать.

Comments

[Ankhena]

Проверяйте if ($(window).width() > 768) {вызов слик}

breakpoint'ы не на чем пробовать

[Андрей]

Ankhena, в данном примере, есть одна проблема, когда делаем resize окна, то слайдер продолжает работать и чтобы он пропал нужно обновлять страницу

[Ankhena]

Андрей, и что мешает проверять при ресайзе или при смене ориентации?

[Андрей]

Ankhena, Спасибо за помощь! Вот решил таким способом:

$(window).on("load resize", function(){
	  var width = $(document).width();
	  
	  if (width > 768) {
	    $('.s-players').slick('unslick');
	  } else {
	    $('.s-players').not('.slick-initialized').slick({  
	      slidesToShow: 1,
	      slidesToScroll: 1,
	      infinite: true,
	    });
	  }
	});

[Сергей Бурдужа]

Андрей, круто, работает)) Мне тоже пришлось немного помучиться.

[Павел]

Андрей, Привет. Использовал твое решение, но консоль говорит об ошибке типизации

slick.min.js:1 Uncaught TypeError: Cannot read property 'unslick' of undefined

$(window).on("load resize", function(){
    var width = $(document).width();
     
    if (width > 500) { 
      $('.profit-row, .plan-row,  .teachers-slider').slick('unslick');
    } else { 
      $('.profit-row, .plan-row, .teachers-slider').not('.slick-initialized').slick({  
        slidesToShow: 1, 
        slidesToScroll: 1, 
        infinite: true,
      });
    }
  });

Все файлы для работы со slick подключены:

- <link rel="stylesheet" href="slick/slick.css"/>
- <script src="slick/slick.min.js"></script>

Была ли такая же проблема и какое находили решение?

[Sarog]

Павел, проверяйте перед отключением

if($('#slider1').hasClass('slick-initialized')) {
$('#slider1').slick('unslick');
}

Answer 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;
    }
  }
});

Comments

[Андрей]

спасибо! глянь выше в комментариях, как у меня получилось

[Сергей Бурдужа]

Вы что-то попутали, человеку нужно, чтобы слайдер включился при разрешении ниже 768px.
А у вас в коде все наоборот.

[Сергей Бурдужа]

Андрей, Ну и где глянуть, где ваш код? Или я слепой?

Answer 2

[Svet280]

$('.slider').slick({
     mobileFirst: true,
     responsive: [
        {
           breakpoint: 767,
           settings: "unslick"
        }
     ]
  });

Answer 3

[Алексей Семенов]

А если попробовать отключать на 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,

}
}
]
});
});

Comments

[Андрей]

Пробовал уже подобное, но так не работает.
При такой записи slider всегда работает.

Answer 4

[manbiker]

window.addEventListener("resize", function () {
if (window.innerWidth < 1024) {
$(".menu-slider").slick("unslick");
sliderIsLive = true;
} else {
if (sliderIsLive) {
$(".menu-slider").slick();
sliderIsLive = false;
}
}
});
я выключил слайдер вот этим кодом

Answer 5

[alexeysaralev]

if ($(window).width() < '991') {
$('.slider').slick('destroy');
}

можно сделать так