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

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

## 対処

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

> * [unslick | slick – にほんご。](https://tr.you84815.space/slick/methods/unslick.html)
> * [javascript – Only use slick.js on mobile screen size – Stack Overflow](https://stackoverflow.com/questions/26004201/only-use-slick-js-on-mobile-screen-size/54757492#54757492)

576px で制御。

“`javascript
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` を利用して表示を制御します。

> * [どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い方 | ITハット](http://ithat.me/2016/10/17/how-to-use-slick-jquery-plugin)

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

### `Uncaught TypeError: Cannot read property ‘add’ of null`

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

> * [Uncaught TypeError: Cannot read property ‘add’ of null · Issue #1953 · kenwheeler/slick](https://github.com/kenwheeler/slick/issues/1953)

“`javascript
$(‘.slider’).not(‘.slick-initialized’).slick();
“`

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

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

> * [javascript – unslick method not working – Stack Overflow](https://stackoverflow.com/questions/27798824/unslick-method-not-working)

“`javascript
$(‘.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](https://kenwheeler.github.io/slick/)

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

“`javascript
// 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);
});
“`

> * [Unslick responsively · Issue #542 · kenwheeler/slick · GitHub](https://github.com/kenwheeler/slick/issues/542)
> * [jquery – Can this possible to unslick in desktop and slick slide in mobile? – Stack Overflow](https://stackoverflow.com/questions/43071082/can-this-possible-to-unslick-in-desktop-and-slick-slide-in-mobile)

## 補遺

> * [[jQuery] slick のドキュメントが翻訳されている模様 | deadwood](https://www.d-wood.com/blog/2018/10/26_10577.html)