jQueryスライダー『slick.js』 設置方法解説と設定オプション一覧

webサイトのトップページなどに多くみられる、画像やコンテンツを左右に切り替える、スライダー slider(カルーセル carouselとも）。

jQueryプラグインとしてさまざまなスライダーが公開・提供されていますが、中でも設定の簡単さとオプションの充実度からお勧めしたいのが今回解説する『slick』です。

今回はその設置手順とサンプルを交えた使い方と各種オプションの詳細をデモを交えて解説していこうと思います。

『slick』の主な機能と特徴

まずはslickの主な機能と特徴をピックアップ。

• レスポンシブ対応
• ブレイクポイントごとの設定振り分けが可能
• タッチデバイスに対応
• IE8以上のブラウザで完全動作
• 縦・横カーセルに対応
• 画像遅延ロード機能
• MITライセンス

基本的な機能はもちろん、モバイル環境への対応内容などを見ても、中々使い勝手が良いスライダーの香りがしませんか？

設置手順を解説

オフィシャルサイトから一式のダウンロードとデータの展開

それでは、slickの設置方法を解説します。
まずは『slick』のオフィシャルサイト、もしくはGitHubからデータ一式をダウンロードしましょう。

推移したページで、『Download Now』をクリック。ローカルにデータ一式のzipファイルを保存します。

ダウンロードしたzipファイルを解凍し、その中に格納されているファイルを使用します。

「slick.css」「slick.min.js」の2つがあれば最低限、slickを動作させることができますが、slick既存の公式テーマを使う場合はさらに「fonts」「ajax-loader.gif」「slick-theme.css」の3つも必要です。

「fonts」の中には、デフォルトの矢印ボタン用のフォントが格納されています。

必要最低限の記述で『slick』スライダーを設置

動作に必要なHTMLの記述は下記の通りです。

まずはhead要素内でjQueryと、slick、slickのcssとテーマcssをhead要素内で読み込みます。
※パスは適宜変更してください

<script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="./js/jquery-migrate-1.4.1.min.js"></script>
<script type="text/javascript" src="./js/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/slick.css" media="screen" />
<link rel="stylesheet" type="text/css" href="./css/slick-theme.css" media="screen" />

続いてスライダー部分のhtmlをbody要素内の任意の場所に記述します。

<div class="slick-box">
	<figure><img src="img/img_slide_01.gif" width="" height="" alt=""/></figure>
	<figure><img src="img/img_slide_02.gif" width="" height="" alt=""/></figure>
	<figure><img src="img/img_slide_03.gif" width="" height="" alt=""/></figure>
	<figure><img src="img/img_slide_04.gif" width="" height="" alt=""/></figure>
</div>

最後に同じく設定をjQueryで記述。最低限の記述は下記だけでOKです。
※赤く示した箇所のセレクタは前述のhtmlで付与したのクラス（またはID）を指定します。

<script type="text/javascript">
$(function() {
	$('.slick-box').slick(); 
});
</script>

ひとまず、以上で動作します。

PCならマウスポインタで、スマートフォンでご欄の方はスワイプで画像が切り替わるのを確認できます。

slickは、jQueryで指定したセレクタと、html側の親要素のclass（またはID）が合致していて、記述に問題がなければ、同要素内の子要素がスライダーになりますのでulとliである事は必須ではありません。仮導入やデバッグも楽です。

複数画像を表示する『slick』スライダーの例

下記の記述をする事で複数画像を表示するタイプのスライダーとして動作させる事ができます。

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

slidesToShowオプションは、同時に表示される画像の枚数を設定。slidesToScrollは何枚分の画像を移動させるか、という設定です。infiniteはtrueを指定する事で、最後のスライドの次は最初のスライドへ……と、無限ループしてくれます。

レスポンシブ対応の『slick』設定

responsiveの中に、breakpointとsettingのオプションを記述します。

breakpointで横幅のブレイクポイントを設定し、さらにsettingsでそのブレイクポイント以下の幅で表示させる枚数などの設定をします。複数のブレイクポイントを設けるときは幅の大きい方から記述します。

具体的にはこのような感じです。幾つかの他のオプションも追加しています。

<script type="text/javascript">
$(function() {
	$('.slick-box3').slick({
		dots: true, // スライダー下部に表示される、ドット状のページネーションです
		infinite: true, // 無限ループ
		speed: 300, // 切り替わりのスピード
		slidesToShow: 4, //通常 1024px以上の領域では4画像表示
		slidesToScroll: 4, 
		responsive: [{
			breakpoint: 1024,settings: { //601px～1024pxでは3画像表示
				slidesToShow: 3,
				slidesToScroll: 3,
			}
		},
		{
			breakpoint: 600,settings: { //481px～600pxでは2画像表示
				slidesToShow: 2,
				slidesToScroll: 2
			}
		},
		{
			breakpoint: 480,settings: {//480px以下では1画像表示
				slidesToShow: 1,
				slidesToScroll: 1
			}
		}]
	});
});
</script>

『slick』のセンターモード

centerModeオプションをtrueに設定するとセンターモードになります。

さらにcenterPaddingを設定する事で表示されているスライドの前後の要素が一部はみ出ているような形で表示されます。記述例は以下のような形です。

<script type="text/javascript">
$(function() {
	$('.slick-box4').slick({
		centerMode: true, //センターモード
		centerPadding: '60px', //前後のパディング
		autoplay: true, //オートプレイ
		autoplaySpeed: 2000, //オートプレイの切り替わり時間
		slidesToShow: 3, 
		responsive: [{
			breakpoint: 768,
			settings: {
				arrows: false, // 前後の矢印非表示
				centerMode: true,
				centerPadding: '40px',
				slidesToShow: 3
			}
		},
		{
			breakpoint: 480,
			settings: {
				arrows: false,
				centerMode: true,
				centerPadding: '40px',
				slidesToShow: 1
			}
		}]
	});
});
</script>

その他 設定可能オプションの一覧

デモを見ていただくと分かるように、特殊な独自カスタマイズをせずとも、痒い所に手が届くカスタマイズが可能な『slick』。如何でしょうか。

以下に、公式オプションの一覧を掲載いたしますのでgithubのドキュメントと併せてご確認ください。

豊富なオプションに加え、テーマやスタイルシートもカスタマイズする事でさらに表現方法は広がります。ぜひ色々お試しください。

※その他注意事項など

• 複数のスライダーを同一ページに設置する場合はクラス名を変更する事。
• 矢印などのフォントがどうにも表示されない場合。コンソールに” CORS policy: No ‘Access-Control-Allow-Origin’ header is…”的なエラーが出ている場合、.htaccessの設定が必要な事があり。
  解決方法など”BootstrapのGlyphiconsが表示されない対処法(クロスオリジンリクエスト) – Qiita”を参考にしました

まとめ ライセンスについて

これまで同様の機能では『bxSlider』などを使う事が多く重宝していたのですが一部の環境挙動が不安定だったり、カスタマイズの手間がかかる事もありました。その点、後発の『slick』はさまざまな環境での利用を想定して作られていて、今のところ設置利用で手間取った事はありません。

ライセンスはMITライセンス、費用に関しては商用利用でも無料ですので、その点も安心です。特殊な環境やアニメーションなどのカスタマイズもオプションの組み合わせで可能なSlickは現時点でもっともバランスのいいSliderだと思います。

設置に関してや、オプション関連でご不明な点があれば、当ページコメント欄でもお気軽にご相談ください。