Web制作 スライダー

【slick】サムネイルクリックで画像が切り替わるスライダーの作り方

slickでサムネイル付きのスライダーって作れない?
色々なタイプが作れるよ!

今回はslickを使ったサムネイル付きのスライダーをいくつかご紹介していきます。

slickを使った事がない人はこちらの記事を参照下さい。

レスポンシブ対応のスライダープラグイン「slick」の使い方

サムネイル付きスライダー(サムネイルクリックでメインスライド変更)

まずはサムネイルが3枚で、サムネイルをクリックするとメインの画像が切り替わるスライダーです。

See the Pen
slick(サムネイル:)
by junpei (@junpei-sugiyama)
on CodePen.


サムネイルのクリックと、サムネイル左右にある矢印をクリックでスライドが動きます。

メイン画像の左右にも矢印を表示させれば同じようにクリックでスライドを動かせますが、矢印が2つあるのは変なのでサムネイルの方にしか表示させていません。

コード解説

それではコードを見ていきます。

<div class="container">
  <div class="slider">
    <div class="slick-img">
      <img src="画像パス1" alt=""/>
    </div>
    <div class="slick-img">
      <img src="画像パス2" alt=""/>
    </div>
    <div class="slick-img">
      <img src="画像パス3" alt=""/>
    </div>
  </div>
  <div class="thumbnail">
    <div class="thumbnail-img">
      <img src="画像パス1" alt=""/>
    </div>
    <div class="thumbnail-img">
      <img src="画像パス2" alt=""/>
    </div>
    <div class="thumbnail-img">
      <img src="画像パス3" alt=""/>
    </div>
  </div>
</div>

コードが長くなるので上記のコードではメイン画像とサムネイル画像は3枚ずつになっていますが、実際はスライドの枚数だけ書きます。

見たら分かると思いますが、最初のulタグがメイン画像のスライダーで、次のulタグがサムネイルのスライダーになります。

この2つは連動するので、画像パスは合わせましょう。

cssは変わった所はないのでjQueryを見てみます。

$(function () {
  // メイン画像のオプション
  $(".slider").slick({
    autoplay: true, // 自動再生ON
    arrows: false, // 矢印非表示
    asNavFor: ".thumbnail", // サムネイルと同期
  });
  // サムネイルのオプション
  $(".thumbnail").slick({
    slidesToShow: 3, // サムネイルの表示数
    asNavFor: ".slider", // メイン画像と同期
    focusOnSelect: true, // サムネイルクリックを有効化
  });
});

説明は全てオプションの横に書きましたが、メイン画像とサムネイルの両方にあるのがasNavForになります。

これは同期したい対象のclass名を指定します。

ちなみにメイン画像はフェードにすることも可能です。

See the Pen
by junpei (@junpei-sugiyama)
on CodePen.

 

サムネイル付きスライダー(サムネイル固定)

先ほどはサムネイルがスライドしましたが、今度はサムネイルを固定します。

See the Pen
by junpei (@junpei-sugiyama)
on CodePen.

 

コード解説

htmlは先ほどと枚数が違うだけです。

サムネイルが固定なので、サムネイルは表示されてる数にしてメイン画像も同じ数にします。

そしてjQueryも先ほどと同じで、違うのは以下のコードをcssに追加しただけです。

.thumbnail .slick-track {
  transform: unset !important;
}

これだけです。

こちらもメイン画像はスライドとフェードどちらでも出来ます。

またデモのように選択されていないサムネイルは透過させたい場合は以下のコードを追記すればOKです。

.thumbnail-img {
  opacity: .3;
  transition: opacity .3s linear;
}
.thumbnail .slick-current {
  opacity: 1;
}

 

サムネイル付きスライダー(サムネイル固定2行)

今度は先ほどのサムネイル固定を少し変え、サムネイルを2行にしてみます。

See the Pen
slick(サムネイル固定:2列)
by junpei (@junpei-sugiyama)
on CodePen.


htmlは先ほどの3枚から6枚に変わっただけで、jQueryもサムネイルの表示数を設定するslidesToShowが3から6に変わっただけです。

そして先ほどのサムネイル1行のスライダーからcssで追加されたコードはこちらです。

.thumbnail-img {
  width: calc(100% / 3) !important;
}

これがないとslidesToShowは6なので1行6枚で表示されてしまいます。

ここで強制的に1枚の横幅を1/6から1/3にした事で1行は3枚となり、残りの3枚は次の行に移動しました。

以上になります。

-Web制作, スライダー
-