Written by Kasumi

【簡単】slickスライダーをデバイス幅(PC・スマホ)によって機能を有効または無効にする方法

slickスライダーを使っていて、スマートフォンではスライダーにしてPCではスライダーにしたくない。

デバイス幅によって、slickスライダーを有効または無効にしたい。

本記事ではjQueryを使ってこのような悩みを解決します。

※jQueryを使うので、事前にライブラリを読み込みましょう。

解決コード

$(function(){
    function sliderSetting(){
 
        var width = $(window).width();
 
        if(width <= 767){
          // スマートフォンの場合
            $('.slider').slick({
                autoplay: true,
            });
        } else {
            // pcの場合
        }
    }
 
    sliderSetting();
 
    $(window).resize( function() {
        sliderSetting();
    });
});

上記jQueryコードがPC・スマホ等デバイス幅によってslickスライダー機能を有効または無効にするコードサンプルです。

デバイス幅で分けるには、まず$(window).width()を使って使用されてるデバイスの横幅を取得します。

if文で条件分岐し、取得したデバイス幅がある横幅以上または以下でslickの実行関数を入れてあげればOKです。

上記コード例では、デバイス幅が767px以下(一般的にスマートフォンをコーディングする際に使われるメディアクエリのブレイクポイント数)でslickを起動、それ以外の幅ではslickを起動しない(スライダーを無効)記述になってます。

以上で解決できたかと思います。

まとめ

デバイス幅によって、slickのオプションを変えるだけならslick内で用意されてるresponsiveオプションを使えば可能ですが、スライダーの実行有無を変える場合は本記事のやり方が適切です。

以上で解説を終わります。

目次

関連記事

slick

slickスライダーの矢印を画像にし、上下中央揃えの位置にカスタマイズする方法。【簡単】

更新日:2022.11.25
2155
slick

【簡単】slickスライダーでデバイス事にオプションを切り替えよう【レスポンシブ設定を追加】

更新日:2022.11.25
660
slick

【簡単】slickスライダーで一瞬縦並びになり崩れた表示になるのを対処する方法

更新日:2022.11.25
2742
slick

【簡単】slickを使い左右チラ見せ中央固定のカルーセルスライダーを実装する方法

更新日:2022.11.25
2579