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もぜひ検討してみてください。