WEBサイトでよくみられるカルーセルスライダーですが、ファーストビューでユーザーへ多くの情報を伝えたいときに便利です。
今回は、カルーセルスライダーをお手軽に実装できるjQueryプラグインslick(スリック)の使い方について紹介します。
slick（スリック）のファイルを入手
slick HP
slickの公式サイト（https://kenwheeler.github.io/slick/）へ移動し、
メニューの「get it now」をクリックします。
slick HP
画面中央にある「Download Now」ボタンをクリックし、ファイルを入手します。
ダウンロードしたフォルダにはいくつかファイルがありますが、必要なファイルは
- ajax-loader.gif
- fontsフォルダ一式
- slick.css
- slick-theme.css
- slick.min.js
になるので、これらのファイルをFTPでサーバーへアップロードし、CSSファイルとjsファイルを読み込みます。
続いて、スライダーで表示するための画像を複数枚用意しましょう。
<ul class="slider"> <li><img src="****/sample01.jpg" alt="sample01"></li> <li><img src="****/sample02.jpg" alt="sample02"></li> <li><img src="****/sample03.jpg" alt="sample03"></li> <li><img src="****/sample04.jpg" alt="sample04"></li> <li><img src="****/sample05.jpg" alt="sample05"></li> </ul>
slick（スリック） スライダーの作成
ファイルを読み込み、画像を準備できれば、あとは以下のコードを追加するだけで、スライダーを作成することができます。
一見すると、1枚の画像のように見えますが、スライダーになっています。
＄('.slider').slick();
slick（スリック）オプションの紹介
slickには様々なオプションが用意されており、追加することで、スライダーの表示を変更することができます。その一部を紹介します。
ドットを表示
dots (初期値：false 、タイプ:boolean)
スライドの枚数と何枚目のスライドをみているかわかるように、スライダー下にドットを追加することができます。
＄('.slider').slick({
dots: true
});
スライダー左右の矢印を表示
arrows (初期値：true 、タイプ：boolean)
前後のスライダーを表示できる矢印を追加します。
<注>arrowsオプションはデフォルトでtrueになっていますが、矢印が表示されていないように見えます。これは矢印が白色になっているためなので、以下のコードを追加し色を付けます。
.slick-prev::before,
.slick-next::before{
color:black!important;
}
スライドの表示枚数の指定
slidesToShow (初期値：1 、タイプ：int)
表示されるスライドの数を変更することができます。下のスライダーは3枚表示にしています。
＄('.slider').slick({
slidesToShow: 3
});
前後のスライドの一部を表示
centerMode (初期値：false 、タイプ：boolean)
表示しているスライドに加え、前後のスライドの一部を表示することができます。
＄('.slider').slick({
centerMode: true
});
スライド切り替え時間の指定
speed (初期値：300 、タイプ：int)
表示しているスライドから次のスライドへ切り替える時間(ミリ秒)を指定することができます。下のスライダーは2000なので2000ミリ秒（2秒）かけて切り替わります。
＄('.slider').slick({
speed: 2000
});
コメント