Slick carousel responsive breakpoints

Question

This is the configuration I am using to create a slick carousel on my web page:

$('#carousel').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  arrows: true,
  autoplay: true,
  autoplaySpeed: 2000,
  responsive: [
    {
      breakpoint: 1200,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
      },
    },
    {
      breakpoint: 1008,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
      },
    },
    {
      breakpoint: 800,
      settings: 'unslick',
    },
  ],
})

It is working the way it is supposed to work except for one thing... when I resize my browser window from width: 1920 to 800, the carousel unslicks it, and the content is displayed like normal divs.

But then when I increase the width of the browser window the carousel doesn't recreate it. It remains like HTML div blocks without carousel.

Any help would be appreciated.

Answer 1

unslick is a destructor method. Once you unslick, you need to call slick() again to construct carousel.

Answer 2

This is one way to rebuild the carousel after unslick kills it at a breakpoint:

$(window).resize(function () {
    $('.js-slider').not('.slick-initialized').slick('resize');
});

$(window).on('orientationchange', function () {
    $('.js-slider').not('.slick-initialized').slick('resize');
});