レスポンシブ対応のカルーセル/スライダーを実装できるjQueryプラグイン「slick」

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;
}

横に流れ続ける無限ループスライダーを実装する

横に無限に流れ続けるループスライダーにしたい場合は、スクリプトを以下のようにします。

<script>
$(function(){
  $('.slide').slick({
    autoplay: true,
    autoplaySpeed: 0,
    speed: 10000,
    cssEase: 'linear',
    arrows: false,
    swipe: false,
    pauseOnFocus: false,
    pauseOnHover: false,
    variableWidth: true
  });
});
</script>

「autoplaySpeed: 0」にすることでスライドが常に切り替わり、「cssEase: ‘linear’」を指定することで等速で流れ続けます。

オプション

代表的なオプションについては、以下の通りです。

autoplay	自動再生
autoplaySpeed	自動再生の間隔
arrows	ナビゲーション(矢印)の表示
dots	スライド数を示すドットの表示
fade	フェードイン・フェードアウトの切り替え効果
infinite	ループの有無
pauseOnHover	マウスホバーで自動再生を一時停止
pauseOnDotsHover	ドットにマウスホバーで自動再生を一時停止

オプションは他にも用意されていますので、詳しくは公式サイトをご参照ください。

あとがき

シンプルなカルーセル/スライダーも個性的なものも、どちらも実装可能なプラグインですね。

サイトに導入するカルーセル/スライダーのプラグインで迷ったら、slickもぜひ検討してみてください。