How to disable Slick slider?

Question

JavaScript

You need to disable the slider at a screen size of 768 and above, and below 768 enable it.
Here is the code I did:
$(function() {
$('.s-players').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1,
responsive: [
{
breakpoint : 768,
settings: "unslick"
}
]
});
});
But here it turns out the opposite, up to 768 it works, but after that it doesn’t. Tell me how to do it right.

Answer 1

Here it works. But you need to understand that this does not work the way you want. And if unslick worked, then you need to reload the page so that it starts working again with a larger window size.

$(".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"
    }
  ]
});

But it looks good, but the implementation could be better. Therefore, instead of breakpoints in the config, it is better to control the process yourself.

window.addEventListener("resize", function() {
  if (window.innerWidth <= 768) {
    $('.your-slider').slick('unslick');
    sliderIsLive = false;
  }
  else {
    if (sliderIsLive) {
      $('.your-slider').slick();
      sliderIsLive = true;
    }
  }
});

Answer 2

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

Answer 3

And if you try to disable it by 0, and enable it by 769 (I have no way to check.):

$(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,

}
}
]
});
});