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

JQueyのスライダーの中でもレスポンシブ対応で動作が安定して使いやすいslick.jsですが、スマホのみ動作させたい場合どのようにすればいいのか調べてみました。調査して分かったことを紹介していきますので、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が動作するようになっております。

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

slickをレスポンシブのスマホ時のみ動作する方法について紹介していきます。
以外とスマホのみ適用という仕事にバッティングする場合もあるので、簡潔に一つのコードでslickを動作させたい場合には今回紹介した方法を使用してみてはいかがでしょうか。

おすすめの記事