サムネイル付きの画像表示をSwiperで作る

JavaScript/jQuery

今回は、以前も紹介したSwiperを利用してサムネイルをクリックすると拡大画像が表示される画像表示を設置する方法について紹介していきたいと思います。

・Swiperのページ
https://swiperjs.com/

Swiperのページのスクリーンショット

今回作りたいもの

今回作成するのは、下のように大きな画像とサムネイルがあり、これらが連動していてサムネイルをクリックするか左右のナビゲーションをクリックすると、大きく表示される画像が切り替わるというものになります。
Swiperでは、自動的にスライドするスライダーを作成することが多いかと思いますが、今回の例のようなものもSwiperを利用することで簡単に作成することができますので、作り方について紹介していきます。

作成方法をおおまかに紹介すると、Swiperを利用したスライダーを2つ設置して、それらを連動させるという方法になります。
次の項目で記述例などについて紹介していきます。

記述例

前の項目で紹介したスライダーを設置する場合の記述例を紹介していきます。
なお、SwiperのCSSとJSはCDNから読み込ませています。

SwiperのCSSをCDN経由で読み込ませる

HTMLのheadタグ内に下記のような記述を設置してSwiperのCSSをCDN経由で読み込ませます。

<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />

CSS

CSSに関しては、それぞれの場合に応じた記述をされるかと思います。
上で紹介しているスライダーでは、大きく表示されている画像のサムネイルに外枠をつけていますので、その部分の記述例だけ紹介しておきます。

.swiperThumbnail .swiper-slide-thumb-active {
        border: 3px solid #007aff;
      }

HTMLのスライダー部分

HTMLファイルに記述するスライダー部分の記述例は以下のようになります。
大きく表示される画像の部分とサムネイルの部分の2つのスライダーを設置するような記述になります。
それぞれのスライダーが同じスライド要素(.swiper-slide)を持ちつつ、異なるクラス名(ここでは.swiperMain.swiperThumbnail)を持つようにして下さい。

<div class="swiper swiperMain">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="https://web-saku.net/wp-content/uploads/2022/01/blue-flower-1.jpg" alt="" /></div>
    <div class="swiper-slide"><img src="https://web-saku.net/wp-content/uploads/2022/01/sunflower-1.jpg" alt="" /></div>
    <div class="swiper-slide"><img src="https://web-saku.net/wp-content/uploads/2022/01/nature-flower-1.jpg" alt="" /></div>
    <div class="swiper-slide"><img src="https://web-saku.net/wp-content/uploads/2022/01/daylily-1.jpg" alt="" /></div>
    <div class="swiper-slide"><img src="https://web-saku.net/wp-content/uploads/2022/01/cherry-blossoms-1.jpg" alt="" /></div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div> 

<div class="swiper swiperThumbnail">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="https://web-saku.net/wp-content/uploads/2022/01/blue-flower-1.jpg" alt="" /></div>
    <div class="swiper-slide"><img src="https://web-saku.net/wp-content/uploads/2022/01/sunflower-1.jpg" alt="" /></div>
    <div class="swiper-slide"><img src="https://web-saku.net/wp-content/uploads/2022/01/nature-flower-1.jpg" alt="" /></div>
    <div class="swiper-slide"><img src="https://web-saku.net/wp-content/uploads/2022/01/daylily-1.jpg" alt="" /></div>
    <div class="swiper-slide"><img src="https://web-saku.net/wp-content/uploads/2022/01/cherry-blossoms-1.jpg" alt="" /></div>
  </div>
</div>

JavaScript

Swiperに関するJavaScriptをHTMLファイル内に記述する場合の例は以下のようになります。
ここではSwiperのインスタンス化の順番に注意が必要です。
設置した2つのスライダーを連動させるために、大きく表示される画像の方のスライダーでサムネイルとなる方のスライダーを参照するため、先にサムネイルとなる側のインスタンス化を行う必要があります。

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script>
    var swiperThumbnail = new Swiper(".swiperThumbnail", {
      slidesPerView: 5,
      spaceBetween: 8,
      freeMode: true,
      watchSlidesProgress: true,
    });

    var swiperMain = new Swiper(".swiperMain", {
      effect: "fade",
      loop: true,
      navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      thumbs: {
          swiper: swiperThumbnail,
        },
    });
</script>

以上、Swiperを利用して簡単にサムネイルつきの画像表示を作成する方法について紹介してきました。
参考になりましたら幸いです。

関連記事

Swiperの設置方法や基本的な使い方については、下記の記事で紹介していますのでよかったら見てみてください。

コメントを残す





このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください