slickは、レスポンシブ対応のカルーセル/スライダーを実装することができるjQueryプラグインです。非常に豊富なオプションも用意されています。
今回は、このslickの実装手順を紹介したいと思います。そんなに難しくないので、ぜひチャレンジしてみてください。
ステップ1. ファイルのダウンロードと設置
slickの公式サイトにアクセスし、「get it now」からファイル一式をダウンロードします。GitHubからダウンロードしてもOKです。
zipファイルを解凍したら、以下のフォルダとファイルをサーバー上にアップロードします。
- fontsフォルダ
- slick.css
- slick-theme.css
- slick.min.js
- ajax-loader.gif
fontsフォルダとslick-theme.css、ajax-loader.gifは同階層に設置してください。
ステップ2. HTMLのマークアップ
<head>～</head>内で、以下のようにアップしたcssファイルをロードします。
<link rel="stylesheet" href="css/slick.css"> <link rel="stylesheet" href="css/slick-theme.css">
続いて、</body>の直前で、以下のようにjQueryとslick本体をロードします。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="js/slick.min.js"></script>
スライドを表示する部分は、以下のように画像をリストで記述します。
<ul class="slide"> <li><img src="images/slide/slide1.png"></li> <li><img src="images/slide/slide2.png"></li> <li><img src="images/slide/slide3.png"></li> <li><img src="images/slide/slide4.png"></li> <li><img src="images/slide/slide5.png"></li> </ul>
ステップ3. slickの実行
最後に、</body>の直前に以下を追加して、slickを実行します。
<script>
$(function(){
$('.slide').slick({
autoplay:true,
autoplaySpeed:5000,
arrows:true,
dots:true,
pauseOnHover:true
});
});
</script>
「.slide」の部分は、画像を包括しているulに付与したクラスと合わせます。
スライダーの矢印を差し替える
ナビゲーションの矢印をオリジナル画像に差し替えるには、「appendArrows」オプションを指定します。
以下のように、スライドの下に矢印用の画像をマークアップしておきます。
<ul class="slide"> <li><img src="images/slide/slide1.png"></li> <li><img src="images/slide/slide2.png"></li> <li><img src="images/slide/slide3.png"></li> <li><img src="images/slide/slide4.png"></li> <li><img src="images/slide/slide5.png"></li> </ul> <div id="slide-arrow"> <div class="slick-next"><img src="images/slide-next.png" alt=""></div> <div class="slick-prev"><img src="images/slide-prev.png" alt=""></div> </div>
appendArrowsオプションで、矢印画像を包括しているIDを指定すると、ナビゲーションの矢印を差し替えることができます。
<script>
$(function(){
$('.slide').slick({
autoplay:true,
autoplaySpeed:5000,
arrows:true,
dots:true,
pauseOnHover:true,
appendArrows: $('#slide-arrow')
});
});
</script>
もしくは、HTMLでは以下のように矢印の要素を記述せずに、slickのオプションで差し替える方法もあります。
<ul class="slide"> <li><img src="images/slide/slide1.png"></li> <li><img src="images/slide/slide2.png"></li> <li><img src="images/slide/slide3.png"></li> <li><img src="images/slide/slide4.png"></li> <li><img src="images/slide/slide5.png"></li> </ul> <div id="slide-arrow"></div>
スクリプト側では以下のように指定します。
<script>
$(function(){
$('.slide').slick({
autoplay:true,
autoplaySpeed:5000,
arrows:true,
dots:true,
pauseOnHover:true,
appendArrows: $('#slide-arrow'),
prevArrow: '<div class="slide-prev"><img src="images/slide-prev.png" alt=""></div>',
nextArrow: '<div class="slide-next"><img src="images/slide-next.png" alt=""></div>',
});
});
</script>
appendArrowsで矢印の要素を置く場所(ID)を指定し、prevArrowとnextArrowで要素を記述すると、appendArrowsで指定した箇所に矢印(ここではslide-prev.pngとslide-next.png)が出力されます。
画像でなくてもアイコンフォントやテキストなど、色んな矢印と差し替えることができます。
サムネイル付きのスライダーを設置する
サムネイル付きのスライダーを設置するには、メインのスライドとサムネイル用のスライドを2つ作成します。
<ul class="slide thumb-item"> <li><img src="images/slide/slide1.png"></li> <li><img src="images/slide/slide2.png"></li> <li><img src="images/slide/slide3.png"></li> <li><img src="images/slide/slide4.png"></li> <li><img src="images/slide/slide5.png"></li> </ul> <ul class="slide thumb-item-nav"> <li><img src="images/slide/slide-nav1.png"></li> <li><img src="images/slide/slide-nav2.png"></li> <li><img src="images/slide/slide-nav3.png"></li> <li><img src="images/slide/slide-nav4.png"></li> <li><img src="images/slide/slide-nav5.png"></li> </ul>
スクリプトは以下のように記述します。
<script>
$(function(){
$('.thumb-item').slick({
autoplay:true,
infinite:true,
autoplaySpeed:5000,
speed:500,
dots:false,
pauseOnHover:false,
arrows:false,
fade:true,
asNavFor: '.thumb-item-nav'
});
$('.thumb-item-nav').slick({
accessibility: true,
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.thumb-item',
focusOnSelect: true
});
});
</script>
「asNavFor」でメインのスライドとサムネイルをそれぞれ指定して、スライドの切り替わりを連動させます。また、サムネイルの「focusOnSelect」をtrueにすると、表示中スライドのサムネイルに”slick-current”というクラスが追加されます。
上記を記述すれば、横並びのサムネイルが表示されますので、あとはCSSで見た目を調整しましょう。
前後のスライドを表示させる
表示されているスライドの前後のスライドを表示させるには、オプションに「centerMode: true」と「centerPadding: ‘〇%’」を追加します。
<script>
$(function(){
$('.slide').slick({
autoplay:true,
autoplaySpeed:5000,
dots:true,
pauseOnHover:true,
slidesToShow: 1,
centerMode: true,
centerPadding: '10%'
});
});
</script>
centerPaddingの値を大きくすると、前後のスライドが見える部分も大きくなります。
アクティブなスライド以外(隠れている前後のスライド)にスタイルを適用するには、CSSセレクタで「.slick-slide:not(.slick-active)」を指定します。例えば、以下のように指定すれば、表示されているアクティブなスライド以外は半透明になります。
.slick-slide:not(.slick-active) {
opacity: 0.7;
}
合わせてスライド間の余白も入れておくと良いですね。
.slider .slick-slide {
margin: 0 30px;
}
スライド部分を横幅いっぱいにして、前後のスライドを表示させるデザインって結構ありますよね。slickを使えばこういったデザインも簡単に実現可能です。
また、中央のスライドのみにスタイルを適用したい場合は、「.slick-slide.slick-center」をセレクタに指定します。
.slick-slide.slick-center {
background: #ff0000;
}
オプション
代表的なオプションについては、以下の通りです。
| autoplay | 自動再生 |
| autoplaySpeed | 自動再生の間隔 |
| arrows | ナビゲーション(矢印)の表示 |
| dots | スライド数を示すドットの表示 |
| fade | フェードイン・フェードアウトの切り替え効果 |
| infinite | ループの有無 |
| pauseOnHover | マウスホバーで自動再生を一時停止 |
| pauseOnDotsHover | ドットにマウスホバーで自動再生を一時停止 |
オプションは他にも用意されていますので、詳しくは公式サイトをご参照ください。
あとがき
シンプルなカルーセル/スライダーも個性的なものも、どちらも実装可能なプラグインですね。
サイトに導入するカルーセル/スライダーのプラグインで迷ったら、slickもぜひ検討してみてください。