優秀なカルーセル「slick.js」を使ってみた。

改めて使うと、やっぱりこのjsは優秀ですね。
某案件でお急ぎでコーディングする必要がありました。js含めてやらないと行けない中、
工数がほぼ無いのでもうライブラリに頼ろうと思った次第です。

今回使用したのは「slick.js」というカルーセルライブラリ。
jQuery必須ですが、安定した動作と豊富なオプションにシンプルなのでカスタマイズも容易ということで、
自分のメモ用として記載しておこうかと思います。

必要なもの

jQuery1.7.0＋

導入手順

とりあえず下記からslick.jsをダウンロード。

この中で最低限必要なのが

• js
  • slick.min.js
  • slick.css
• css
  • fonts
  • ajax-loader.gif

他、サイト環境に合わせて「slick-theme.scss」などのテーマファイルを使用します。
ここまで用意できたらhtmlに組み込みましょう。
jsとcss読み込ませたら、カルーセルのHTMLを組み込み

• HTML

<div class="任意のクラス名">
	<div>カルーセルの中身1</div>
	<div>カルーセルの中身2</div>
	<div>カルーセルの中身3</div>
</div>

• js

<script type="text/javascript">
	$(document).ready(function(){
		$('任意のクラス名').slick({
			setting-name: setting-value
		});
	});
</script>

setting-name: setting-valueと書いてる場所は、
特にオプション不要であれば必要なく、「$('任意のクラス名').slick();」だけでOKです。

そんなオプションですが、こちらのgithubに網羅されてます（英語）。

オプション含めた実装例を紹介しますと、

<script type="text/javascript">
	$('.carousel').slick({
		dots: true,//ドットナビゲーションの表示
		infinite: true,//無限ループ
		arrows: true,//左右矢印ナビの表示
		speed: 1000,//切り替えスピード
		cssEase: 'ease-in-out',//イージング
		//レスポンシブでのプション変更
		responsive: [{
			breakpoint: 736,//ブレークポイント
			settings: {
				arrows: false//左右矢印非表示
			}
		}]
	});
</script>

な感じで、レスポンシブサイトでSP表示の場合はナビ非表示も可能です。
ブレークポイントは勿論複数設定可能で「,」で区切るといいです。
オプション変更で、左右チラ見せ表示等も可能です。

大変素晴らしいライブラリでした(´・ω・｀)