Slick slider responsive issue

Question

Hi I am trying to create a breakpoint for various slides in Slick slider, but it's not working properly. I have tried to create the breakpoint through this code:

   jQuery('.collection-slider').slick({
       infinite: true,
       slidesToShow: $(window).width() > 600 ? 5 : 1,
       slidesToScroll: 1,
       infinite: false,
       focusOnSelect: true,
       centerPadding: '0px',
       dots: true,
      
       draggable: true,
       autoplay:true,
       autoplaySpeed:1500,
       prevArrow: '.thumbnails-slider__prev--recommendation',
       nextArrow: '.thumbnails-slider__next--recommendation'
   });

I have 5 slides showing on the desktop and at less than 600px wide it's showing only one slide. I need your help to break my slides further to other screen sizes. Please guide.

Answer 1

Could you share why native slick's Responsive Display does not work:

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

There are few problems with your code. Window's width discovery is done incorrectly, I believe ( window.screen.width is there to detect window's width I believe). Besides, you configure slick's slidesToShow once on widget's initialization. What if user resizes the screen? Or re-orientates his phone? You'd have to attach to a specific event and re-initialize the widget, I suppose.

I recommend trying to use native mechanism, possibly debug what's wrong. Doing custom RWD on your own is not that simple.