Why doesn't the slick slider work correctly?

Question

Slick

I'm trying to make the slider rotate at different screen widths in different ways. Here is the code

if (window.innerWidth > 1024) {
    $('#slide-s').slick({
      slidesToShow: 3,
    		slidesToScroll: 1,
    		autoplay: true,
    		autoplaySpeed: 2000,
    });
  } else {
    $('#slide-s').slick({
      slidesToShow: 1,
    		slidesToScroll: 1,
    		autoplay: true,
    		autoplaySpeed: 2000,
    });
  }

everything works, but I want to display 1 image each instead of 3 if the screen width is less than 1024px, but still displays three? What's wrong?

Answer 1

Different slider settings for different screen widths in slick are done differently:

$('.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
  ]
});

Section "Responsive Display" - kenwheeler.github.io/slick