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.
Advertisement
Answer
unslick is a destructor method. Once you unslick, you need to call slick() again to construct carousel.