[jQuery] スマートフォンでのみ Slick スライダーを表示させる

デスクトップ表示では Slick スライダーを無効化したい。

対処

.slick('unslick') メソッドを利用し、画面幅に応じて無効化させます。

576px で制御。

var init = {
  autoplay: true,
  infinite: true,
  cssEase: "linear",
  slidesToShow: 1,
  slidesToScroll: 1 };


$(function () {
  var win = $(window);
  var slider = $(".slider");

  win.on("load resize", function () {
    if (win.width() < 576) {
      slider.not(".slick-initialized").slick(init);
    } else if (slider.hasClass("slick-initialized")) {
      slider.slick("unslick");
    }
  });
});

See the Pen
Only use slick.js on mobile screen size
by DriftwoodJP (@DriftwoodJP)
on CodePen.

トラブルシューティング

Slick を利用しているサイトで見かけたエラーの対処方法。

ロード中にスライドが一覧で表示されてしまう

.slick-initialized を利用して表示を制御します。

.slider {
  display: none;
}
.slider.slick-initialized {
  display: block;
}

Uncaught TypeError: Cannot read property 'add' of null

何らかの処理で複数回 $('.slider').slick() を呼び出すと、このようなエラーがおきるとのこと。
初期化時に追加される .slick-initialized を利用してコントロールします。

$('.slider').not('.slick-initialized').slick();

Uncaught TypeError: fooSlider.not(...).unslick is not a function

以前のバージョンでは .unslick というメソッドを利用していたのでしょうか。
.slick('unslick') に書き換えます。

$('.slider').slick('unslick');

補遺