使い勝手の良いslick.jsスライダー（レスポンシブ対応）

今では、様々なスライダーのプラグインが存在しますが、バリエーションの多さや対応の幅で使いやすいと評価の高い「slick」をご紹介します。スマホやタブレット端末などでの「スワイプ機能」にも対応しているので色々と使い勝手が本当にいいです！

まずはこんな感じ！といった「デモサンプル」を用意しましたので確認してみてください。

デモサンプル1

横幅固定でセンター寄せのスライドになっています。左右にカルーセル付きの仕様になっています。

それでは使い方を見ていきましょう。

1.ファイルをダウンロード

はじめに、ファイル一式を公式サイトからダウンロードします。

slick

「slickフォルダ」の中に以下のファイルが入っています。

これを任意の場所に配置して読み込みましょう。サンプルでは、ルート階層に「slickフォルダ」を配置したと仮定して話をしていきます。

2.必要なファイルを読み込む

CSSを読み込む

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

1 2	<link rel="stylesheet" type="text/css" href="slick/slick.css"/> <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

<head>内で上記のように“css”を読み込んでください。

jQueryとJavaScriptを読み込む

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="slick/slick.js"></script>

1 2	<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="slick/slick.js"></script>

</body>の直前で“jQuery”と“JavaScript”を読み込んでください。

3.JavaScriptを記述

<script type="text/javascript">
	$(function(){
		$('.任意のクライス名').slick();
	}); 
</script>

$(function(){

$('.任意のクライス名').slick();

});

</script>

先ほどの「slick.js」を読み込んだ後に、上記のスクリプトを記述します。「.任意のクラス名」となっている部分に、お好きな名前を付けてください。ここでは、「.slide_type_a」というクラス名にしておきます。

4.HTMLを記述

<div id="Box">
	<ul class="slide_type_a">
		<li><a href="#"><img src="images/slider_1.jpg" alt="" /></a></li>
		<li><a href="#"><img src="images/slider_2.jpg" alt="" /></a></li>
		<li><a href="#"><img src="images/slider_3.jpg" alt="" /></a></li>
		<li><a href="#"><img src="images/slider_4.jpg" alt="" /></a></li>
		<li><a href="#"><img src="images/slider_5.jpg" alt="" /></a></li>
		<li><a href="#"><img src="images/slider_6.jpg" alt="" /></a></li>
	</ul>
</div>

</ul>

</div>

画像を6枚スライドすると仮定して<li>タグで配置しています。ここでの画像サイズは「W:700×H:300px」のものを使っています。

5.CSSを記述

#Box{
	width: 100%;
}
#Box ul {
	margin: 0 auto;
	width: 700px;
}

#Box{

width: 100%;

}

#Box ul {

margin: 0 auto;

width: 700px;

}

これでOKです。

こちらのサンプルがこちらになります▼

1.Single Item / シングルアイテム

デモサンプル1

スライドする枚数やスピード、表示する画像枚数などをオプションで追加することができます。これは後ほど記述しますね。

▼それでは、もう少し別のパターンのサンプルも見てみましょう。

2.Multiple Items / マルチプルアイテム

次に横幅固定サイズで3枚の画像を表示するタイプになります。

先ほど手順【1】【2】までは同じで、【3.Javascriptを読み込む】ところから少し変わってしますので、そこから説明していきたいと思います。

3-2.Javascriptを読み込む

<script type="text/javascript">
	$('.slide_type_b').slick({
		infinite: true,
		slidesToShow: 3,
		slidesToScroll: 3
	});
</script>

$('.slide_type_b').slick({

infinite: true,

slidesToShow: 3,

slidesToScroll: 3

});

</script>

こちらはオプション設定で以下の要素を指定しています。

infinite: true; ・・・無限ループを有効にする
slidesToShow: 3; ・・・見えているスライドの数
slidesToScroll: 3; ・・・矢印ワンクリックでスライドする枚数

4-2.HTMLを記述

<div id="Box">
	<ul class="slide_type_b">
		<li><a href="#"><img src="images/slider_1_m.jpg" alt="" /></a></li>
		<li><a href="#"><img src="images/slider_2_m.jpg" alt="" /></a></li>
		<li><a href="#"><img src="images/slider_3_m.jpg" alt="" /></a></li>
		<li><a href="#"><img src="images/slider_4_m.jpg" alt="" /></a></li>
		<li><a href="#"><img src="images/slider_5_m.jpg" alt="" /></a></li>
		<li><a href="#"><img src="images/slider_6_m.jpg" alt="" /></a></li>
	</ul>
</div>

</ul>

</div>

HTMLは、サンプル1とほとんど変わりませんが、唯一<ul>タグのクラス名を「.slide_type_b」としています。

5-2.CSSを記述

#Box ul.slide_type_b{
	width: 900px;
}

#Box ul.slide_type_b{

width: 900px;

}

画像1つの横幅サイズを300pxで使っているために、<ul class=”slide_type_b”>の横幅を900pxにしています。表示したい画像サイズに合わせてそこは適宜変更してください。

これでOKです。

こちらのサンプルがこちらになります▼

デモサンプル2

ついでにもうひとつ、“レスポンシブ対応”のパターンも見ていきましょう。

3.Responsive Display / レスポンシブディスプレイ

こちらからウィンドウサイズに対応したレスポンシブ仕様になっています。

先ほど手順【1】【2】までは同じで、【3.Javascriptを読み込む】ところから少し変わってしますので、そこから説明していきたいと思います。

3-3.JavaScriptを読み込む

<script>
	$('.slide_type_c').slick({
		dots: false,
		infinite: true,
		speed: 300,
		slidesToShow: 3,
		slidesToScroll: 3,
		responsive: [
		{
					breakpoint: 1024,
					settings: {
					slidesToShow: 3,
					slidesToScroll: 3,
					infinite: true,
					dots: true
				}
			},
				{
					breakpoint: 900,
					settings: {
					slidesToShow: 2,
					slidesToScroll: 2
				}
			},
				{
					breakpoint: 600,
					settings: {
					slidesToShow: 1,
					slidesToScroll: 1
				}
		}
		// You can unslick at a given breakpoint now by adding:
		// settings: "unslick"
		// instead of a settings object
		]
	});
</script>

$('.slide_type_c').slick({

dots: false,

infinite: true,

speed: 300,

slidesToShow: 3,

slidesToScroll: 3,

responsive: [

{

breakpoint: 1024,

settings: {

slidesToShow: 3,

slidesToScroll: 3,

infinite: true,

dots: true

}

{

breakpoint: 900,

settings: {

slidesToShow: 2,

slidesToScroll: 2

}

{

breakpoint: 600,

settings: {

slidesToShow: 1,

slidesToScroll: 1

}

// You can unslick at a given breakpoint now by adding:

// settings: "unslick"

// instead of a settings object

]

});

</script>

あわわわわわ・・・
ややこしくなってきましたね。。。

細かい詳細は置いておいて、とりあえずコピペしてもらっても構いません。オプションについては後ほど記述することにして次に進んじゃいますね（笑）

4-3.HTMLを記述

<div id="Box">
	<ul class="slide_type_c">
		<li><a href="#"><img src="images/slider_1_m.jpg" alt="" /></a></li>
		<li><a href="#"><img src="images/slider_2_m.jpg" alt="" /></a></li>
		<li><a href="#"><img src="images/slider_3_m.jpg" alt="" /></a></li>
		<li><a href="#"><img src="images/slider_4_m.jpg" alt="" /></a></li>
		<li><a href="#"><img src="images/slider_5_m.jpg" alt="" /></a></li>
		<li><a href="#"><img src="images/slider_6_m.jpg" alt="" /></a></li>
	</ul>
</div>

</ul>

</div>

HTMLは、サンプル1とサンプル2とほとんど変わりませんが、唯一<ul>タグのクラス名を「.slide_type_c」としています。

5-3-1.CSSを記述

#Box ul.slide_type_c{
	width: 900px;
}

#Box ul.slide_type_c{

width: 900px;

}

PC表示の時は、サンプル2と同じで<ul class=”slide_type_c”>の横幅を900pxにしておきます。ここからは、メディアクエリを使用していきますので<head>内に、「css3-mediaqueries.js」を読み込んでください。

メディアクエリについては、過去の記事でご紹介しています。いまいちよくわからない・・・という方は、参考にしてみてください。

【参考】IE8以下でメディアクエリが効かないとき…

メディアクエリーを読み込む

<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

1	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

そしてデバイスサイズごとに、<ul class=”slide_type_c”>の横幅を切り替えるためにCSSを追記します。

5-3-2.CSSを追記

@media screen and (max-width: 900px) {
	#Box,#Box ul.slide_type_c{
		width: 90%;
		margin:0 auto;
	}
	.slide_type_c li img{
		width:100%;
	}
}
@media screen and (max-width: 600px) {
	#Box,#Box ul.slide_type_c{
		width: 90%;
		margin:0 auto;
	}
	
	.slide_type_c li img{
		width:100%;
	}
}

@media screen and (max-width: 900px) {

#Box,#Box ul.slide_type_c{

width: 90%;

margin:0 auto;

}

.slide_type_c li img{

width:100%;

}

@media screen and (max-width: 600px) {

#Box,#Box ul.slide_type_c{

width: 90%;

margin:0 auto;

}

.slide_type_c li img{

width:100%;

}

ブレイクポイントは「900px」「600px」としています。ここもお好きなサイズに変更して使ってもらえれば良いでしょう。

これでOKです。

こちらのサンプルがこちらになります▼

デモサンプル3

長くなってしまいましたが、ここまでで3つのサンプルを見てきました。これ以外にも、「画像サイズがまちまちなスライド表示」など、違ったパターンがあるので「slick公式サイト」で確認してみてください。

オプション

細かいオプションは以下のようになっています。

オプション名	デフォルト	説明
accessibility	true	左右に配置される矢印の有/無
autoplay	false	自動再生の有/無
autoplaySpeed	3000	スライドが切り替わる時間（ミリ秒）
cssEase	‘ease’	CSSでのアニメーション効果 ease/linear/ease-in/ease-out/ease-in-out
dots	false	スライド下に表示されるカレントナビの有/無
dotsClass	‘slick-dots’	カレントナビのクラス名
draggable	true	ドラッグ機能の有/無
easing	linear	jQueryのanimate()でのアニメーションタイプ
fade	false	フェードインでの表示の有/無
arrows	true	前へ/次へナビの有/無
appendArrows	$(element)	前へ/次へナビをカスタムで追加する
appendDots	$(element)	カレントナビをカスタムで追加する
prevArrow	html buttonタグ	前へボタンをカスタムする
nextArrow	html buttonタグ	次へボタンをカスタムする
infinite	true	無限ループの有/無
initialSlide	0	最初のスライド位置
lazyLoad	‘ondemand’	画像の遅延ロード
onBeforeChange (this,currentIndex,targetIndex)	null	メソッド　スライドする前に実行
onAfterChange (this,index)	null	メソッド　スライドした後に実行
onInit(this)	null	メソッド　初期化した際に実行
onReInit(this)	null	メソッド　初期化メソッドを実行した後にこちらのメソッドを実行
pauseOnHover	true	スライドにマウスオーバーした際に、自動再生を止める有/無
responsive	null	どの時点でレスポンシブ表示するかのブレークポイントを設定
slide	div	スライドする要素を変更
slidesToShow	1	見えているスライドの数
slidesToScroll	1	一度にスライドする数
speed	300	スライドアニメーションの時間（ミリ秒）
swipe	true	タッチスワイプの有/無
swipeToSlide	false	スライドの数に関係なくスワイプの有/無
touchMove	true	タッチでスライドの有/無
useCSS	true	CSS Transitionsの有/無
vertical	false	縦方向のスライドの有/無
rtl	false	右から左へスライド方向の変更の有/無

このように多くのオプション設定が用意されていますので、導入したいスライドの形式によって設定してみてください。