【Swiper】サムネイルとメインスライドが連動するスライダーの作り方

こんにちは、Ryohei（@ityryohei）です！

本記事では、Swiperでサムネイルとメインスライドが連動するスライダーの作り方をご紹介しています。

サムネイル付きのスライダーというと、色々と種類がありますよね。サムネイル一覧が表示されているもの、サムネイルがスライダーになっているもの、サムネイルが複数行表示されていてページャーがついているものなどが主流でしょうか。それぞれ用途によって使い分けるかと思いますが、本記事でご紹介するのは下記の要件に当てはまるものになります。

上段にスライダー本体、下段にサムネイルを表示する
下段のサムネイルをスライダーにする
スライド遷移時にメインスライダーとサムネイルが連動する
「前へ・次へ」でメインスライドに合わせてサムネイルも動く

説明だけではわかりにくい……。

なので下記に完成したデモのをご用意しました。どんなものか操作していただければと思います。サムネイルを選択するとメインスライダーの画像が切り替わり「前へ・次へ」の矢印でスライドを切り替えるとサムネイルも動くようになっています。

See the Pen Swiper Thumbnail Gallery by ryohei (@intotheprogram) on CodePen.

上記のスライダーはサイトのキービジュアルとして使用しましたが、他にもギャラリーや記事中で関連画像を表示する際といった用途にも適したスライダーになっています。似たような要件でスライダーを作成される場合は、参考にしていただければ幸いです！

では、解説していきます。

※もしサムネイルを常に中央表示にしてループに対応したい場合は、下記記事をご参照ください。

Swiepr本体を読み込む

SwiperはJavaScriptで動くスライダーのライブラリです。ライブラリなので、Swiperを使用するためには別途Swiperのファイルを読み込む必要があります。

公式サイトからダウンロードする、もしくは開発者から提供されているCNDを読み込むことでSwiperを使用することができます。

下記はCDNでSwiperのファイルを読み込む例です。 CDNのURLは変更されている可能性がありますので、なるべく本体をダウンロードして利用されることをおすすめします。

<!-- Swiper CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

以上で準備は完了です。さっそくスライダーを作成していきましょう。

メインとサムネイルのスライダーを作成する

メインとサムネイルを表示するためのスライダーを作成します。「Swiper」でスライダーを作成する方法は公式サイトで詳しく解説されていますので、ご一読いただくと良いかもしれません。

まずはHTMLでレイアウトを作成します。今回は二つスライダーを使用するため、メインとサムネイル、それぞれのスライダーをマークアップします。

<!-- スライダー-->
<div class="swiper-container slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="sample001.jpg" alt=""></div>
        <div class="swiper-slide"><img src="sample002.jpg" alt=""></div>
        <div class="swiper-slide"><img src="sample003.jpg" alt=""></div>
        <div class="swiper-slide"><img src="sample004.jpg" alt=""></div>
        <div class="swiper-slide"><img src="sample005.jpg" alt=""></div>
        <div class="swiper-slide"><img src="sample006.jpg" alt=""></div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

<!-- サムネイル -->
<div class="swiper-container slider-thumbnail">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="sample001.jpg" alt=""></div>
        <div class="swiper-slide"><img src="sample002.jpg" alt=""></div>
        <div class="swiper-slide"><img src="sample003.jpg" alt=""></div>
        <div class="swiper-slide"><img src="sample004.jpg" alt=""></div>
        <div class="swiper-slide"><img src="sample005.jpg" alt=""></div>
        <div class="swiper-slide"><img src="sample006.jpg" alt=""></div>
    </div>
</div>

合計2つのスライダーを用意しました。上段がメインスライダー、下段がサムネイルを表示するスライダーです。srcにはダミーの値を入れていますので、表示したい画像URLに差し替えてくださいね。

ここまででスライダーの設置は完了です。続いて設置したスライダーにスタイルをつけていきましょう。

メインとサムネイルのスライダーのスタイルを調整する

Swiperの基本的なスタイルはライブラリ本体のCSSファイルに定義されていますので、なのでSwiperのレイアウトを組み込むだけでそれらしいスライダーを表示することができます。ただ、カンプなどに合わせてデザインを調整することも可能です。

下記が上書き用のCSSです。swiper-slide-thumb-activeはサムネイル側のアクティブなスライドに付与されるclassになります。

.swiper-container {
    width: 100%;
    
    //スライダー
    &.slider {
        height: 80vh;
    }
    
    //サムネイル
    &.slider-thumbnail {
        height: 20vh;
        
        .swiper-wrapper {
            
            .swiper-slide {
                width: 25%;
                height: 100%;
                opacity: .5;
                overflow: hidden;

                &.swiper-slide-thumb-active {
                    opacity: 1;
                }
            }
        }
    }
}

以上でスタイルの調整は完了です。最後にスクリプトを作成して2つのスライダーを連動させます。

メインとサムネイルのスライダーを連動させる

今回はメインとサムネイルの2つのスライダーを使用します。そのため、それぞれのスライダーを初期化し、メインのスライダーにサムネイルと連動するようにオプションを追加する必要があります。

といっても難しいことはないくて、メインのSwiperにthumbsをサムネイルとして使用するよ！と指定するだけでサムネイルとして認識してくれます。

具体的には下記のように指定します。

JS

//サムネイル
var sliderThumbnail = new Swiper('.slider-thumbnail', {
  slidesPerView: 4,
  freeMode: true,
  watchSlidesVisibility: true,
  watchSlidesProgress: true,
});

//スライダー
var slider = new Swiper('.slider', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  thumbs: {
    swiper: sliderThumbnail
  }
});

以上でスライダーの作成は完了です。これまでの内容を実装すると、冒頭でご紹介したデモのスライダーが完成します。