【slick】メイン画像が連動するサムネイル付きスライダーの作り方

slickでサムネイル付きのスライダーって作れない？

色々なタイプが作れるよ！

サムネイルのスライドをクリックすると、連動してメインのスライドが切り替わるタイプのスライダーを見たことはありませんか？

今回は、slickを使ったサムネイル付きのスライダーを、コードとサンプル（デモ）を使っていくつかご紹介していきます。

slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。

slickでメイン画像が連動するサムネイル付きスライダーの作り方

今回は、3種類のスライダーを作っていきます。

サムネイルクリックでメインスライド変更
サムネイル固定
サムネイル固定2行

それでは、1つずつ解説していきます。

サムネイルクリックでメインスライド変更

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

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

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

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

HTMLのコード

HTMLの書き方はこちら。

<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枚ずつになっていますが、実際はスライドの枚数だけ書きます。

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

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

jQueryのコード

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のコード

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に変わっただけです。

CSSのコード

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

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

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

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

まとめ

今回は、slickでメイン画像が連動するサムネイル付きスライダーの作り方を解説しました。

色んなタイプがあるので、ご自身の環境に合わせて実装してみて下さい。

以上になります。

関連記事slick記事一覧
関連記事Swiper記事一覧
関連記事Splide記事一覧

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！

投げ銭で応援する🐶

【slick】メイン画像が連動するサムネイル付きスライダーの作り方

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

【初心者向け】jQueryとは？CDNを使った本体の読み込み方も分かりやすく解説

【slick】カスタマイズ用オプションまとめ一覧

slickでメイン画像が連動するサムネイル付きスライダーの作り方

サムネイルクリックでメインスライド変更

HTMLのコード

jQueryのコード

メイン画像をフェードにする

サムネイル固定

HTMLのコード

サムネイル固定2行

CSSのコード

まとめ