CODEWITHSUNDEEP
javascriptslick.js
Coded Container
Coded Container

Reputation: 863

Slick Slider Responsive Breakpoints Not Working?

Below is my initialization of the slick slider. According to the documentation at http://kenwheeler.github.io/slick/ you have to set the highest breakpoint first following the smallest. In this example, my slider does not change the number of slides until it reaches its smallest breakpoint of 650px. Does anyone know why? You can see this not working correctly on https://unitedway.iupui.edu in the Youtube slider section. 

$('.slick-slider').slick({
    autoplay: true, 
    autoplaySpeed: 3000,
    slidesToShow: 3,
    responsive: [
        {
            breakpoint: 1900, 
            settings: {
                slidesToShow: 3, 
                slidesToScroll: 3
            },
           breakpoint: 767, 
            settings: { 
                slidesToShow: 2, 
                slidesToScroll: 2
            },
            breakpoint: 650, 
            settings: {
                slidesToShow: 1, 
                slidesToScroll: 1
            },


        }
    ]
});

Upvotes: 2

Views: 6057

Answers (1)

Chigozie Orunta
Chigozie Orunta

Reputation: 438

I think there's a little syntax error with your code it should be:

{
        breakpoint: 1900, 
        settings: {
            slidesToShow: 3, 
            slidesToScroll: 3
        }
},
{
       breakpoint: 767, 
        settings: { 
            slidesToShow: 2, 
            slidesToScroll: 2
        }
},
{
        breakpoint: 650, 
        settings: {
            slidesToShow: 1, 
            slidesToScroll: 1
        }
}

Upvotes: 6

Related Questions