Slick carousel responsive breakpoints

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.

Answer

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

4 People found this is helpful

Advertisement

Answer