,

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

公開日: 2019/02/19
更新日: 2019/06/18

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

Contents

対処

.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');

標準機能での対処

追記: 2019/06/18

公式ドキュメント内に下記の記述がありました。

You can unslick at a given breakpoint now by adding:
settings: "unslick"
instead of a settings object

slick – the last carousel you’ll ever need

ウィンドウリサイズで切り替える必要が無ければ、標準機能で対処可能です。

// Set a Slick Slider to Tablet & SmartPhone.
const slideCard = {
  dots: true,
  autoplay: true,
  infinite: true,
  cssEase: "linear",
  slidesToShow: 1,
  slidesToScroll: 1,
  responsive: [
    {
      breakpoint: 9999,
      settings: "unslick"
    },
    {
      breakpoint: 992,
      settings: {
        centerMode: true,
        centerPadding: "10%"
      }
    }
  ]
};

$(() => {
  $(".js-slide-card--unslick-on-desktop").slick(slideCard);
});

補遺