slickでスライドショー（バリエーションその3）

オートプレイ（自動的にスライドする）

jQueryのスライダープラグインslickで画像スライダーを作るの続き。今度は画像を自動的にスライドするオプション。といっても簡単で、slickのオプションにautoplay: trueを渡すだけ。 3枚表示のサンプルを使ってやってみる。

[sample10.js]

$(function() {
  $('.slick-slider').slick({
    dots: true,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
  });
});

autoplay: trueで自動スライドがオン。 autoplaySpeed: ミリ秒指定で、自動スライドの切り替わり秒数を指定できる。ここでは2秒間隔。

fade オプション

fade オプションを true にすると、切り替わり時にフェードインで次の画像が表示される。ただ、次のサンプルのような1枚もののスライドでは効果的だったが、3枚もののスライドなどではうまく機能しなかった。

[sample11.js]

$(function() {
  $('.slick-slider').slick({
    dots: true,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    speed: 500,
    fade: true,
    cssEase: 'linear',
  });
});

cssEaseオプションは、 default値は'ease'になっていて、他に'linear'などが指定できるっぽいので、 CSS3の animation-timing-function プロパティに対応したものと思われる。なのでアニメーション開始時から終了時までの変化の度合い（一定に変化するのか、開始時は緩やか終了時に近づくと素早くなど）を指定するものだろう。

レスポンシブ対応

複数枚の画像を表示するスライダーの場合、スマホなどの小さな画面では入りきらないことも多い。画面サイズに合わせて表示枚数を変えることができればよい。 slickにresponsiveオプションを渡すことで、画面サイズにあわせて表示する枚数を変えるなどのことができる。

[sample12.js]

$(function() {
  $('.slick-slider').slick({
    dots: true,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 3,
    responsive: [
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  });
});

breakpointで画面サイズを指定する。サンプルではデフォルトで画像３枚のスライダーが、600px以下で２枚に、480ｐｘ以下で1枚になるようセッティングしている。

上のサンプルをPCで見ると3枚のスライドだが、スマホで見ると1枚のスライドになっているはずだ。

サムネイル付きスライダー

メインの画像表示の下に小さなサムネイルをナビゲーションとして並べて、サムネール側をクリックするとその画像がメイン領域に表示される。

HTML側でメインの画像リストの下に、サムネイル用の画像のリストを書いておく必要がある。bodyタグ内だけ載せる。

[sample13.html]

...........................................................
<body>
  <div id="main">
    <!-- slider body -->
    <ul class="slick-slider">
      <li><a href="#"><img src="images/001.jpg"></a></li>
      <li><a href="#"><img src="images/002.jpg"></a></li>
      <li><a href="#"><img src="images/003.jpg"></a></li>
......................................(略)............................................
      <li><a href="#"><img src="images/013.jpg"></a></li>
      <li><a href="#"><img src="images/014.jpg"></a></li>
      <li><a href="#"><img src="images/015.jpg"></a></li>
    </ul>
    <!-- thumbnails -->
    <ul class="slick-thumbnail">
      <li><a href="#"><img src="images/thumb/thumb_001.jpg"></a></li>
      <li><a href="#"><img src="images/thumb/thumb_002.jpg"></a></li>
      <li><a href="#"><img src="images/thumb/thumb_003.jpg"></a></li>
......................................(略)............................................
      <li><a href="#"><img src="images/thumb/thumb_013.jpg"></a></li>
      <li><a href="#"><img src="images/thumb/thumb_014.jpg"></a></li>
      <li><a href="#"><img src="images/thumb/thumb_015.jpg"></a></li>
    </ul>
  </div>
  
 <div class="iframe-wrap">
    <iframe src="https://ss450622.stars.ne.jp/samples/jsSlider/sample13.html" scrolling="no" frameborder="no" width="100%" height="500px" 
    style="transform:scale(1.0); transform-origin: left top;"></iframe>
  </div>
</body>
.....................................

メイン画像が領域の左右センターにくるように若干CSSで調整する。

.slick-slide img {
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

メインのスライダーとサムネイルの両方をそれぞれ slick でスライダー化し、メイン側でasNavForオプションでサムネイルにするクラスを指定、サムネイル側もasNavForでメインリストのクラスを指定する。 focusOnSelect: trueでサムネイルを選択するとメイン側が連動するように設定してくれる。

[sample13.js]

$(function() {
  $('.slick-slider').slick({
    dots: true,
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    centerMode: true,
    centerPadding: '40px',
    asNavFor: '.slick-thumbnail',
  });
  $('.slick-thumbnail').slick({
    infinite: true,
    slidesToShow: 5,
    slidesToScroll: 1,
    centerMode: true,
    asNavFor: '.slick-slider',
    focusOnSelect: true,
  });
});

真ん中のサムネイルがメイン画像に来るように、サムネイル側は奇数表示でセンターモードにしてある。メイン側のarrows: falseが無いと、メインとサムネイル両方に矢印が出ておかしいのでメイン側の矢印を消してある。