slickをレスポンシブにおいてスマホ時のみ動作する方法

2020年7月15日 2020年7月15日

JQueyのスライダーの中でもレスポンシブ対応で動作が安定して使いやすいslick.jsですが、スマホのみ動作させたい場合どのようにすればいいのか調べてみました。調査して分かったことを紹介していきますので、slickをスマホのみ適用したい方はご参考にしていただければと思います。

・slickをスマホ時のみ動作させる方法
・slickをレスポンシブにおいてスマホ時のみ動作する方法まとめ

slickをスマホ時のみ動作させる方法

前置きとしてslick.jsは下記が公式サイトとなります。
ファイルのダウンロードや、基本的な使い方などは公式サイトをご参考ください。

slick公式サイトはこちら

テーマに戻りますが、slickをスマホ時のみ動作させる方法です。
下記コードをhead内に直接記述するか、JSファイル内に記述してください。

$(function(){
	function sliderSetting(){
	    var width = $(window).width();
	    if(width <= 769){
	        $('.slider').not('.slick-initialized').slick({
	            autoplay: true,
	            centerMode: false,
	            arrows:true,
	            infinite: true,
	            dots:true,
	            slidesToShow: 1,
	            slidesToScroll: 1,
	            centerPadding: '0px',
	        });
	    } else {
	        $('.slide.slick-initialized').slick('unslick');
	    }
	}
	sliderSetting();
	$(window).resize(function(){
	    sliderSetting();
	});
});

上記を適用することによって、PCサイズの画面時にはslickは動作しません。
4行目で指定しているブレイクポイント以下になれば、slickが動作するようになっております。