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 });
コメント