Почему некорректно работает слайдер slick?

Question

[Денис]

Пытаюсь сделать, чтобы слайдер крутил при разной ширине экрана по-разному. Вот код:

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,
		});
	}

Всё работает, но я хочу, чтобы при ширине экрана меньше 1024рх выводилось по 1 картинке, а не по 3, но по-прежнему выводит по три. Что не так?

Answer 1

[Dymok]

Разные настройки слайдера для разной ширины экрана в slick делаеются по-другому:

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

Раздел "Responsive Display" - kenwheeler.github.io/slick