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

JavaScript

複数枚の画像を表示するスライダー

jQueryのスライダープラグインslickで画像スライダーを作るの続き。今度は別パターン。 画像を3枚づつ表示させてクリックすると3枚ずつスライドしていく。

HTMLは前の記事とほぼ同じ。 UL>LIで並べた画像のリストを5枚では物足りないので15枚に増やした。 リストの変更部分のみ省略して載せる。

[sample05.html]

<body>
  <div id="main">
    <!-- imgタグを含むliタグで画像を15枚列挙 -->
    <ul class="slick-slider">
      <li class="slick-item">
        <a href="#"><img class="sample-img" src="images/001.jpg"></a>
      </li>
      <li class="slick-item">
        <a href="#"><img class="sample-img" src="images/002.jpg"></a>
      </li>
　　..............................(省略)..............................
      <li class="slick-item">
        <a href="#"><img class="sample-img" src="images/014.jpg"></a>
      </li>
      <li class="slick-item">
        <a href="#"><img class="sample-img" src="images/015.jpg"></a>
      </li>
    </ul>
  </div>
</body>
</html>

もっと増えたら書くのも大変なのでfor文などが使えるテンプレートシステムやJavaScript側で工夫するとよいかも。

jsファイル側の記述はslickに渡すオプションがやや増える。

[sample05.js]

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

各オプションの意味。dotsは前の記事に書いた。

オプション 意味
infinite trueで無限ループ
slidesToShow 一度に表示する枚数
slidesToScroll 一度にスクロールする枚数

画像3つ分の幅が必要なのでCSSも若干修正する。

[sample0５.css]

#main {
  width: 680px;
  height: auto;
}

　　....................(省略)....................

画像の左右にある小さな矢印をクリックすると、画像が３つづつ切り替わる。

DEMO sample05

slidesToScrollオプションの設定を１にして、クリックすると１枚づつ動いていくようにしたのがこちら。

[sample06.js]

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

DEMO sample06

３枚づつ動く設定の時は１５枚を３で割った５つのドットが現れたが、こんどは１５枚一つづつなのでドットも１５個。ちなみに任意のドットをクリックしても、そこの画像を左の先頭に表示する。

センターモード

奇数枚の画像をスライドさせるときに、現在アクティブな画像をスライドの真ん中に表示させるには、オプションでcenterMode: trueを渡す。 偶数枚の場合どうなるかやってみたら、中心にくる2枚の右側にアクティブな画像が来た。要するにターゲット画像の左端が中心に来るってことだろう。

centerMode: trueを指定せずに、slidesToShow: 3などで複数枚数のスライドにした場合、単に3枚が並ぶが、centerPadding: 数値でさらにその両側の画像をどこまで覗かせるかを指定できる。 指定しないとcenterPadding: 0pxを指定したのと同じで、centerPaddingのデフォルト値は50px。px または % で指定できる。

次のサンプルでは40pxを指定して、3枚の両側をのぞかせている。スライダー全体はdiv id="main"で取り囲まれている。#mainの幅はcssで680ｐｘで指定しており、これはslickの仕組みとは関係なくこちらで調整して決めた幅。``centerPadding```で余白幅の数値を指定しても全体の680ｐｘは変化せず、パディングも含めた幅が680ｐｘになるようslickが調整してくれているみたいで、その分高さが減少している。

[sample06-2.js]

$(function() {
  $('.slick-slider').slick({
    dots: true,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    centerMode: true,
    centerPadding: '40px',
  });
});

DEMO sample06-2