This is the configuration I am using to create 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 suppose to work except for one thing, When i resize my browser window from 1920 width to 800 width, the carousel unslicks and the content is displayed like normal div’s, but then when I increase the width of browser window the carousel doesn’t recreates. 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.
4 People found this is helpful