How to enable the slick slider at a certain resolution, and disable it when the window is resized?

Question

JavaScript

I did it in this way, I don’t like it, because. errors are thrown into the console

var clientWidth = document.body.clientWidth;

$('.tales__slider').slick({
    arrows: false,
    dots: true,
    infinite: true,
    slidesToScroll: 1,
    variableWidth: true
  });

function resizeTaleSlider(clientWidth) {
    if (clientWidth < 992) {
      $('.tales__slider').slick({
        arrows: false,
        dots: true,
        infinite: true,
        slidesToScroll: 1,
        variableWidth: true
      });
    } else {
      $('.tales__slider').slick("unslick");
    }
  }

  resizeTaleSlider(clientWidth);

  $(window).resize(function() {
    let clientWidth = document.body.clientWidth;
    resizeTaleSlider(clientWidth);
  });

In general, this method seems to me a crutch, is there a "native" way to solve this problem? I didn't find anything in the official docs about this.

Answer 1

See option responsive.
Try like this:

$('.tales__slider').slick({
  arrows: false,
  dots: true,
  infinite: true,
  slidesToScroll: 1,
  variableWidth: true,
  mobileFirst: true,
  responsive: [{
    breakpoint: 992,
    settings: 'unslick'
  }]
});