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