【jQuery】画像をスライドさせるカルーセルSlickプラグインの使い方

jquery

カルーセルを実現するためのjQueryプラグインSlickの使い方を解説します。
カルーセルとは、あの画像が横にスルスルとスライドするやるのことです。

[スポンサーリンク]

Slickをダウンロードする

Slickを取得します。
ダウンロードは本家GitHubからどうぞ。
Download ZIPをクリックしてダウンロードします。

本家のリファレンス&デモはこちらからどうぞ。

slick1

Slickを使ったサンプルソース

Slickの一番基本的なSingle Itemを使ったサンプルソースを実装します。
実際に動かすと画像が常に1枚だけ表示されて、マウス操作によってクルクルと画像が切り替わるソースです。
このような感じのページを作成します。

HTMLのヘッダにコチラをセットして下さい。
さきほどダウンロードした、jsファイルとCSSファイルとjQueryをセットします。

<link href="css/slick.css" type="text/css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" type="text/javascript" ></script>
<script src="js/slick.min.js"></script>

HTMLはこちらを使います。
画像は自分で用意して下さい。
コチラで使った画像は、後ほど登場するデモ画面から取得できます。

    <div class="content">
	    <div class="slider single-item">
	        <div><img src="./img/1.jpg"/></div>
	        <div><img src="./img/2.jpg"/></div>
	        <div><img src="./img/3.jpg"/></div>
	        <div><img src="./img/4.jpg"/></div>
	        <div><img src="./img/5.jpg"/></div>
	        <div><img src="./img/6.jpg"/></div>
	    </div>
    </div>

JavaScript部分のサンプルソースです。

		$(function() {
			$('.single-item').slick();
		});

デモ

実際に動かすことが出来ます

オプションについて

Slickではアニメーションが細かく設定できるようにたくさんオプションがそろっています。
個人的によく使うもの2つを紹介します。

infiniteは、無限ループの有り無しを設定できます。

arrowsは、矢印の有り無しを設定できます。

他オプションについては、以下公式サイトのSettingsに定義されています。
英語での解説ですが、翻訳に挑戦してみて下さい。(汗)

slick1

さいごに

BootStrapにもカルーセルって梱包されてますが、Slickの方が動きが豊富あって私はこっちの方が好きです。
結局好みの問題なのでしょうね(^^;
それでは!