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

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

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

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

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

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

またslickには色々カスタマイズが出来るオプションがあるので、そちらも合わせて活用すると実装出来るスライダーの幅が広がります。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

• 30日間でWeb制作を学べる
• 完全無料
• 現役エンジニアへの質問無制限
• オンラインの動画学習なので時間場所を問わず勉強可能
• 最大4回の学習サポート面談
• 受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

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

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

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

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

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

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

この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枚は次の行に移動しました。

まとめ

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

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

以上になります。

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

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