Responsive breakpoints not working for slick slider

Question

I have implemented slick slider which works fine without resizing the browser. But when I resize the browser to 1024 then the responsive breakpoint settings doesn't work.

Jquery--

$('.slider').slick({
  centerMode: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  infinite: true,
  cssEase: 'linear',
  variableWidth: true,
  variableHeight: true,
  mobileFirst: true,
  responsive: [{
    breakpoint: 1024,
    settings: {
      slidesToShow: 4,
      slidesToScroll: 1,
      centerMode: false
    }
  }]
});

Demo -- https://jsfiddle.net/squidraj/hn7xsa4y/4/

Any help is highly appreciated.

Answer 1

Add this settings to your code;

$(".slides").slick({
    autoplay:true,
    mobileFirst:true,//add this one
}

Answer 2

Add slidesToShow and slidesToScroll option in each breakpoint.

 {
  breakpoint: 786,
    settings: {
              slidesToShow: 3,
              slidesToScroll: 1,
              }
 },
 {
  breakpoint: 568,
    settings: {
              slidesToShow: 2,
              slidesToScroll: 1
            }
  }