• slick

【簡単】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オプションを使えば可能ですが、スライダーの実行有無を変える場合は本記事のやり方が適切です。

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