Slickのスライダー枚数をデバイス幅に応じて切り替えたいです

Question

slickというプラグインを使用してスライダーを作成しています。

デバイス幅に応じて、一度に表示される枚数を切り替えたいです。

$('.pickup').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 1000,
});

現在はslideToshow:3．とあるように、3枚のスライドが表示されています。
このコードがプラグインのjsファイルに既に記載されており、jQueryを利用して切り替えを行いたいと考えています。

理想は1024px以下で2枚、480px以下で1枚の表示にしたいです。

※CSSのwidthで設定しようとしたのですが反映されず、jsが初心者なものでどうして良いかわからず質問させていただきました。よろしくお願いいたします。

Answer 1

公式のサンプルコードは試されましたか？

【slick - the last carousel you'll ever need】
http://kenwheeler.github.io/slick/

$('.center').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});

Answer 2

枚数の数値がを変数にして、切り分けの処理を行えば良いので下記コードでいかがでしょうか？

var slideNums = 3; // 条件以外時の枚数
if ($(window).width() <= 480) {
  slideNums = 1;
} else if ($(window).width() <= 1024) {
  slideNums = 2;
}

$('.pickup').slick({
  slidesToShow: slideNums,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 1000,
});