MENU
  1. ホーム
  2. フロントエンド
  3. JavaScript
  4. 【Swiper】サムネイル付きの画像スライダーを実装する方法

【Swiper】サムネイル付きの画像スライダーを実装する方法

JavaScript

Swiperとは、スライダー（カルーセル）を簡単に作成できるJSライブラリです。

jQueryなどのフレームワークに依存せず、また用意されているオプションを指定するだけで高機能なスライダーを実装できるので、かなり便利ですね。

今回の記事ではサムネイル付きの画像スライダーを実装してみましたので、紹介していこうと思います。

実際に動くDEMOやコピペOKのコードを用意していますので、ぜひ参考にしてみてください。

目次

サムネイル付きの画像スライダーのDEMO

まずは今回実装していくスライダーのDEMOを確認しましょう。

以下に実際のDEMOを用意しました。

スライダーの仕様は、以下のようになっています、

  • メインの画像スライダーとサムネイルスライダーをそれぞれ作成
  • スライド移動にはメインの画像をドラッグするか、サムネイルをクリック
  • サムネイルスライダーはドラッグで横移動可能
  • アクティブ中のサムネイルは透明度を1に、それ以外は0.5に

【コピペ用】サムネイル付きの画像スライダーの実装コード

以下にHTML・CSS・JavaScriptのコピペ用コードを用意しました。

index.html style.css script.jsを作成してそれぞれコピペしてください。

画像は各自用意して使用してください。
メインのスライダーとサムネイルのスライダーには同じ画像を指定してもいいですし、もしサムネイル用の画像がある場合はそちらを指定してください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>サムネイル付きの画像スライダーDEMO</title>
    <!-- CDN読み込み -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
    <!-- CSSファイル読み込み -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrap">

      <!-- メインのスライダー -->
      <div class="swiper-container slider">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="img01.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="img02.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="img03.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="img04.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="img05.jpg" alt="" />
          </div>
        </div>
      </div>

      <!-- サムネイルのスライダー -->
      <div class="swiper-container thumbnail">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="img01.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="img02.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="img03.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="img04.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="img05.jpg" alt="" />
          </div>
        </div>
      </div>

    </div>
    <!-- CDN読み込み -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <!-- JSファイル読み込み -->
    <script src="script.js"></script>
  </body>
</html>
.wrap {
  max-width: 1000px;
  margin: 0 auto;
}

.swiper-slide img {
  width: 100%;
}

/* サムネイルのスタイル */
.thumbnail .swiper-slide {
  opacity: 0.5;
}

/* サムネイルのアクティブスタイル */
.thumbnail .swiper-slide-thumb-active {
  opacity: 1;
}
window.addEventListener("DOMContentLoaded", () => {
  // サムネイルのスライダー
  const thumbnail = new Swiper(".thumbnail", {
    freeMode: true,
    slidesPerView: 3,
    spaceBetween: 10,
    watchSlidesVisibility: true,
    watchSlidesProgress: true,
  });

  // メインのスライダー
  const slider = new Swiper(".slider", {
    thumbs: {
      swiper: thumbnail,
    },
  });
});

これらをコピペするだけで、DEMOと同じスライダーを実装することができます。

画像は各自で用意していただく必要がありますので、その点は注意してください。

次の章でコードの解説をしていきますので、カスタマイズしたい・コードを理解したいという方は読み進めてください。

【解説】サムネイル付きの画像スライダーの実装コード解説

ここからは、以下の順番で実装コードの解説をしていきます。

  1. Swiperを読み込む
  2. HTMLの解説
  3. CSSの解説
  4. JavaScriptの解説

①Swiperを読み込む

まずSwiperを使用するにあたって、ファイルを読み込む必要がありますね。

ここでは一番手軽に読み込むことができるCDNを使用します。

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

<!-- JavaScriptのCDN -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

上記の2行を、HTML内に記入してください。記入する箇所は以下の通りです。

<head>
  <!-- head内でCSSのCDNを読み込む -->
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <!-- bodyの閉じタグ直前でJSのCDNを読み込む -->
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  <script src="script.js"></script>
</body>

CSSは<head>タグ内、JavaScriptは</body>タグの直前で読み込むことが推奨されています。

また、必ずCDNの後にstyle.cssやscript.jsを置くようにしてください。

npmでのインストール、アセットを直接ダウンロードするなど他にも読み込む方法はありますので、詳しくはSwiperの公式ページから確認してください。

②HTMLの解説

まずHTMLでは、メインの画像スライダーと、サムネイルスライダーの2つのスライダーのタグを設置します。

<!-- メインのスライダー -->
<div class="swiper-container slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="img01.jpg" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="img02.jpg" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="img03.jpg" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="img04.jpg" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="img05.jpg" alt="" />
    </div>
  </div>
</div>

<!-- サムネイルのスライダー -->
<div class="swiper-container thumbnail">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="img01.jpg" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="img02.jpg" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="img03.jpg" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="img04.jpg" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="img05.jpg" alt="" />
    </div>
  </div>
</div>

JavaScriptで指定するために、メインのスライダーにはslider、サムネイルスライダーにはthumbnailクラスを付与しておきます。

swiper-から始まるクラスがついていますが、これらはSwiperのCSSから読み込まれるベースのスタイルが設定されているので、そのままにしておいてください。

【ポイント】スライドの枚数と順番は揃えておく

メインのスライダーとサムネイルスライダーのスライド枚数と順番は必ず揃えてください。

メイン・サムネイルの2種類のスライダーを連携させるため、枚数や順番が異なっているとうまく表示されません。

なので、2つのスライダーの中身は全く同じにしておくと実装しやすいかと思います。

<!-- メインのスライダー -->
<div class="swiper-container slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="img01.jpg" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="img02.jpg" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="img03.jpg" alt="" />
    </div>
  </div>
</div>

<!-- サムネイルのスライダー -->
<div class="swiper-container thumbnail">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="img01.jpg" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="img02.jpg" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="img03.jpg" alt="" />
    </div>
  </div>
</div>

メイン・サムネイル両方のスライダーに、同じ画像が設定されていますね。

もし「サムネイルスライダーには、サムネイル専用の画像を使いたい」という場合は、スライドの枚数・順番に注意して以下のように設定してください。

<!-- メインのスライダー -->
<div class="swiper-container slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="img01.jpg" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="img02.jpg" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="img03.jpg" alt="" />
    </div>
  </div>
</div>

<!-- サムネイル専用の画像を使用する場合 -->
<div class="swiper-container thumbnail">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="img01-thumb.jpg" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="img02-thumb.jpg" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="img03-thumb.jpg" alt="" />
    </div>
  </div>
</div>

メインにはimg01.jpg、サムネイルにはimg-thumb01.jpgという風に、画像を分けたパターンです。

サムネイルに最適化した画像を用意する場合は、こちらの方法でもいいですね。

③CSSの解説

スタイルに関してはCDNで読み込んだSwiperのCSSでほとんど用意されていますので、足りない部分のみ付け足していきます。

.wrap {
  max-width: 1000px;
  margin: 0 auto;
}

.swiper-slide img {
  width: 100%;
}

/* サムネイルのスタイル */
.thumbnail .swiper-slide {
  opacity: 0.5;
}

/* サムネイルのアクティブスタイル */
.thumbnail .swiper-slide-thumb-active {
  opacity: 1;
}

まず各スライド内の画像を幅いっぱいに広げるために、.swiper-slideの中のimg要素に対してwidth: 100%を指定します。

これでスライドの領域に画像を広げることができました。

次にサムネイルのスタイルを指定します。

アクティブ中のサムネイルと、それ以外のサムネイルに差をつけたいので、以下のように指定します。

/* サムネイルのスタイル */
.thumbnail .swiper-slide {
  opacity: 0.5;
}

/* サムネイルのアクティブスタイル */
.thumbnail .swiper-slide-thumb-active {
  opacity: 1;
}

.thumbnail内のスライドに対して、opacity: 0.5を指定します。

これで全てのサムネイル画像が半透明になりました。

アクティブ中のサムネイルを目立たせたいので、.swiper-slide-thumb-activeクラスに対して、opacity: 1を指定します。

これでアクティブ中のサムネイルはそのまま表示され、それ以外は半透明にすることができます。

今回はopacityを使用しましたが、borderの色を変える・色付きのオーバーレイをかけるなども可能ですので、各自カスタマイズしてみてください。

④JavaScriptの解説

最後にJavaScriptでスライダーのオプションを指定していきます。

window.addEventListener("DOMContentLoaded", () => {

  // サムネイルのスライダー
  const thumbnail = new Swiper(".thumbnail", {
    freeMode: true,
    slidesPerView: 3,
    spaceBetween: 10,
    watchSlidesVisibility: true,
    watchSlidesProgress: true,
  });

  // メインのスライダー
  const slider = new Swiper(".slider", {
    thumbs: {
      swiper: thumbnail,
    },
  });

});

サムネイルスライダーのオプション

まずはサムネイルスライダーの設定からみていきます。

const thumbnail = new Swiper(".thumbnail", {
  freeMode: true,
  slidesPerView: 3, // 一度に3つのスライドを表示
  spaceBetween: 10, // スライドごとの隙間
  watchSlidesVisibility: true,
  watchSlidesProgress: true,
});

まずはHTMLで用意した.thumbnailクラスがついたスライダーを指定する必要がありますね。

new Swiperの第一引数に、操作したいスライダーのクラスを指定します。

const thumbnail = new Swiper(".thumbnail", {
  // ここにオプションを指定
}

HTMLでサムネイルスライダーに対して.thumbnailクラスを付与したので、上のように指定します。

次は中に指定するオプションを見ていきます。

const thumbnail = new Swiper(".thumbnail", {
  freeMode: true,
  slidesPerView: 3, // 一度に3つのスライドを表示
  spaceBetween: 10, // スライドごとの隙間
  watchSlidesVisibility: true,
  watchSlidesProgress: true,
});

freeModeは、横スクロール・横スワイプする際に固定ポジションで止まらないようにする設定です。

こちらは必須の設定ではない＆言葉では説明しにくいので、falseにしてみて違いを確認し、好きな方を使ってください。

slidesPerViewは初期状態で何枚のスライドを表示するか、spaceBetweenはスライド間の余白を指定できます。

これらも好みによるかと思いますので、各自調整してください。

watchSlidesVisibilityは、現在表示されているスライドに対して追加のvisibleクラスを付与するためのオプションです。

watchSlidesProgressは具体的にどのような処理がされているかは公式を見ても理解できませんでしたが、↑のオプションとセットで使用する必要があるようです。

これらをtrueにすることで、メインのスライダーとサムネイルスライダーが連動して動くようになります。

以上でサムネイルスライダーの解説は終わりです！

メインスライダーのオプション

続いてメインのスライダーを見ていきましょう。

const slider = new Swiper(".slider", {
  thumbs: {
    swiper: thumbnail,
  },
});

先ほどと同様、HTMLで用意した.sliderクラスがついたスライダーを取得します。

const slider = new Swiper(".slider", {
  // ここにオプションを指定
});

次に中に指定するオプションですが、thumbsを使用します。

const slider = new Swiper(".slider", {
  thumbs: {
    swiper: thumbnail,
  },
});

thumbsのオブジェクト内にあるswiperには、サムネイルとして使用したいスライダーを指定することができます。

サムネイルスライダーには、thumbnailという名前を指定しましたね。

なので、swiperの値にはthumbnailが入ります。

これでメインのスライダーとサムネイルスライダーを連携させることができました！

メインのスライダーはなるべくシンプルにしてありますので、他にもいろいろ設定してみてください。

これでJavaScriptの解説は終わりです。

【まとめ】サムネイル付きの画像スライダーを実装する方法

Swiperでサムネイル付きのスライダーを実装する方法を紹介しました。

今回はthumbsオプションで2つのスライダーを連携させるという方法を紹介しましたが、個人的には全く同じ中身のスライダーを2つ設定するのは無駄かなと思っています…。

「メインスライダーとサムネイルスライダーで、別々の画像を使用したい」という場合は、この方法でも良さそうですね。

paginationをカスタマイズする方法だと1つのスライダーでサムネイルを実装できるようですので、機会があればそちらも試してみようと思います。

Swiper

記事が役に立ったらサポートしてください

Web制作に関する
記事案を募集中！

Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。
要望が多かったものは解説記事を作成します。

POST
JavaScript
Swiper
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメントする

目次