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