【解決】slickのスライダーをスマホのみ無効にする【コピペOK】

パソ君

・slickのスライダーをスマホのみ無効にしたい？

こんな疑問にお答えします。

デザインカンプによっては、PCはスライダーでもスマホ時は無効にしたいときありますよね。

実はそれ簡単に実装可能です。

ジト

すぐにできるよ！

ということで、この記事では「slickのスライダーをスマホのみ無効にする」について解説していきます！

2023年1月24日 【jQuery】slickの使い方｜初心者向けに解説【レスポンシブ対応】

【解決】slickのスライダーをスマホのみ無効にする【コピペOK】

そんなスマホのみスライダーを無効にしたサンプルがこちら↓
HTMLやCSSをクリックして、横幅を小さくしてみてください！

See the Pen slick左右透過➁ by jito-coder (@jito-coder) on CodePen.

下記のように横幅を変えると、slickが無効になります。

重要なコードとしてはjQuery部分ですね。

それがこちら↓

$(function () {
    $(".test-slick").slick({
        dots: true,
        arrows: false,
        autoplay: true,
        centerMode: true,
        centerPadding: "8%",
        slidesToShow: 1,
        responsive: [
            {
                breakpoint: 640,
                settings: "unslick",
            },
        ],
    });
});
$(window).on("resize orientationchange", function () {
    $(".test-slick").slick("resize");
});

「responsive」オプションを使い、640px以下になったら「unslick」を指定しています。

「unslick」を指定することで、slickを破棄できちゃいます。

つまり横幅が640px以下だったら、スライダーを無効にするということですね。

また最後の3行、下記部分が重要です↓

$(window).on("resize orientationchange", function () {
    $(".test-slick").slick("resize");
});

これによりウインドウの横幅が変わるたび、もしくは端末が回転したときにスライダーを再調整してくれます。

【解決】slickのスライダーをスマホのみ無効にする【コピペOK】：まとめ

ジト

スマホのみスライダーを無効にしたいときは試してみてね！

2023年6月19日 【解説】slickのオプション一覧【カスタマイズまとめ】

2023年6月19日 【最新】slickのスライダー実装サンプル25選【コピペOK】