☰
Web-saku Web-sakuではweb作成に関する情報をお届けしていきます!

サムネイルに連動する画像表示を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://cdn.jsdelivr.net/npm/swiper@11/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ファイル内に記述する場合の例は以下のようになります。
ここでは設置した二つのスライダーのインスタンス化の順番に注意してください。この順番が正しくないと意図した通りに動作しなくなります。

[注意]
設置した2つのスライダーを連動させるために、大きく表示される画像の方のスライダーがサムネイルとなる方のスライダーを参照する必要があります。
そのため、先にサムネイルとなる側（.swiperThumbnail）のインスタンス化の記述を設置する必要があります。

<script src="https://cdn.jsdelivr.net/npm/swiper@11/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の設置方法や基本的な使い方については、下記の記事で紹介していますのでよかったら見てみてください。

高機能なスライダーを設置できる”Swiper”の使い方

“Swiper”を利用することで、色々なエフェクトのついたスライダーを簡単に実装したり、ブレイクポイントを設定してレスポンシブなスライダー表示にも対応させることができます。 今回は”Swiper”について設置の方法から設定方法、簡単なカスタマイズ例まで紹介していきます。

コメントを残す





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

HOME > JavaScript/jQuery > サムネイルに連動する画像表示をSwiperで作る