slick.jsを使用したスライダをスマホでは適用させてPCでは静止画表示にする方法

こんにちは。ジーニアスウェブのスギタです。
富士山が見たくて、先日静岡まで行って参りました。
雲一つない秋晴れの中じっくり眺めることができ、パワーを頂くことができました。

それでは本題に入りましょう。
サイト制作時によくお世話になっているslick.js。
以前、「スマホ時にはスライドさせたいけど、PCではスライドさせずに静止画表示させたい」という案件がありました。
調べてみるとあるもんですね。
今回はその方法をご紹介させていただきます。

すぐに思いつく簡単な方法に、
HTMLをスマホ用とPC用で２ソースに分ける方法が出てくるかと思います。

しかし、レスポンシブサイトのときは、極力１ソースで組みたいところ。
よっぽどでない限り２ソースに分けることはしたくありませんよね。
今回ご紹介する方法は、もちろん１ソースで実装ができるものです。

 

jsの記述

スマホ、PCともにスライドさせる通常の記述。

$(function() {
	$('.slide').slick({
		autoplay: true,
		dots: true,
		fade: true,
		arrows: true
	});
});

オプションは適宜追加・削除してください。

そして本題の、スマホ時にはスライド、PCでは静止画表示させる際の記述

$(function(){
	function sliderSetting(){

		var width = $(window).width();

		if(width <= 750){
			$('.slide').not('.slick-initialized').slick({
				autoplay: true,
				fade: true,
				dots: true,
				arrows: false
			});
		} else {
			$('.slide.slick-initialized').slick('unslick');
		}
	}

	sliderSetting();

	$(window).resize( function() {
		sliderSetting();
	});
});

上記記述により、ウィンドウ幅によって切り替えが出来るようになります。
簡単に解説させていただきます。

if(width <= 750)
750pxより画面幅が小さいときにslick.jsを実行し、それに当てはまらないときは無効にする、というif文で判定しています。

.slick-initialized
slick.jsが実行された際に、スライド要素に自動で付与されるクラス。
このクラスがついている、ついていないで判定をするみたいです。

.slick(‘unslick’)
slick.jsには、もともとunslickという解除するオプションがあります。

 

さいごに

これで無事に１ソースでスライド切り替えをすることが出来たかと思います。
slick.jsは、あらかじめ沢山のオプションが用意されていますので、大半は思いどおりの動きや見せ方ができるプラグインかと思います。
もちろんレスポンシブ対応もしていて、ブレイクポイントごとに細かく設定が出来ることも魅力の１つではないでしょうか。
まだ使われたことが無い方は、この機会にぜひ使ってみていただきたいです。

それでは、また。