Slick carousel responsive breakpoints

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

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