こんにちは、ryohei(@ityryohei)です!

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

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

  • 上にスライダー本体、下にサムネイルがある
  • サムネイルがスライダーになっている
  • メインのスライダーとサムネイルのスライダーが連動する
  • 「前へ・次へ」のボタンを押すとサムネイルも移動する

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

私は上記のスライダーを制作させていただいたサイトのキービジュアルに使用しましたが、他にもギャラリーや記事中で関連画像を表示する際にも使いやすいスライダーになっているかと思います。

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

Swiepr本体を読み込む

Swiper」JavaScriptで動くスライダーのライブラリです。なので「Swiper」を使用するためには「Swiper」本体を読み込む必要があります。公式サイトからダウンロードする、もしくは開発者の方から提供されている下記のCNDを読み込んでご使用いただければと思います。

<!-- Swiper CSS -->
<link rel="stylesheet"href="https://unpkg.com/swiper/css/swiper.min.css">
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/js/swiper.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>

以上でHTMLの記述は完了です。

続いてHTMLにスタイルをつけていきます。

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

スライダーの基本的なスタイルは「Swiper」のライブラリ本体のCSSで定義されていますので、それらを上書きする形で微調整していきます。「swiper-slide-thumb-active」でアクティブになっているスライドにスタイルを当てることができます。

.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;
                }
            }
        }
    }
}

以上でスタイルの作成は完了です。最後にスクリプトを作成します。

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

今回はメインとサムネイルの二つを使用しますので、それぞれのスライダーを記述し、メインスライダー側でサムネイルと連動するように記述していきます。メインスライダー側の「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
  }
});

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

最後に

いかがでしたでしょうか。

私自身「Swiper」のオプションをすべて把握しているわけではないですが、調べながらでも多くのスライダーを作成することができます。これからスライダーを使用を検討されている方
は「Swiper」の使い方をマスターすることで幅広い案件に対応できるので、おすすめです!

以上、Swiperでサムネイルとメインスライドが連動するスライダーの作り方のご紹介でした!