Swiper

2022.09.19 （更新日：2022.11.25）

Swiperでサムネイル固定のスライダーを実装する方法

Swiperを使ってサムネイル固定のスライダーを実装したい。

本記事ではこの様な悩みを解決。

実装方法について解説します。

実装サンプル

See the Pen
swiper.jsでサムネイル固定スライダーを実装 by Kohei (@kouk05)
on CodePen.0

codePenを使った実装サンプルです。

メインのスライダーの下に固定でサムネイルが二段表示されてます。

サムネイルをクリックすると、メインのスライダーが連動してスライドされます。

実装手順は以下の通りです。

HTMLを用意

<!-- スライダー -->
<div class="swiper-area">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://placehold.jp/00ffff/ffffff/600x300.png" alt="">
      </div>
      <div class="swiper-slide">
        <img src="https://placehold.jp/ff00ff/ffffff/600x300.png" alt="">
      </div>
      <div class="swiper-slide">
        <img src="https://placehold.jp/ffff00/ffffff/600x300.png" alt="">
      </div>
      <div class="swiper-slide">
        <img src="https://placehold.jp/f0f0f0f/ffffff/600x300.png" alt="">
      </div>
      <div class="swiper-slide">
        <img src="https://placehold.jp/0f0f0f/ffffff/600x300.png" alt="">

      </div>
      <div class="swiper-slide">
        <img src="https://placehold.jp/f0000f/ffffff/600x300.png" alt="">
      </div>
    </div>
    <div class="swiper-arrow">
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</div>

まずはSwiperで使うHTMLを準備します。

swiper-container、swiper-wrapper、swiper-slideクラス要素は必須になります。

swiper-slide要素をスライダーの数だけ用意。

ナビゲーションが必要な場合は、swiper-button-prev、swiper-button-nextクラス要素を記述します。

サムネイル用のスライダーを用意

<!-- サムネイル -->
<div class="thumb-list">
  <div class="thumb-item">
    <a class="thumb-link" href="javascript:void(0);" onclick="thumbnail(1)">
        <img src="https://placehold.jp/00ffff/ffffff/600x300.png" alt="">
    </a>
  </div>
  <div class="thumb-item">
    <a class="thumb-link" href="javascript:void(0);" onclick="thumbnail(2)">
        <img src="https://placehold.jp/ff00ff/ffffff/600x300.png" alt="">
    </a>
  </div>
  <div class="thumb-item">
    <a class="thumb-link" href="javascript:void(0);" onclick="thumbnail(3)">
        <img src="https://placehold.jp/ffff00/ffffff/600x300.png" alt="">
    </a>
  </div>
  <div class="thumb-item">
    <a class="thumb-link" href="javascript:void(0);" onclick="thumbnail(4)">
        <img src="https://placehold.jp/f0f0f0f/ffffff/600x300.png" alt="">
    </a>
  </div>
  <div class="thumb-item">
    <a class="thumb-link" href="javascript:void(0);" onclick="thumbnail(5)">
        <img src="https://placehold.jp/0f0f0f/ffffff/600x300.png" alt="">
    </a>
  </div>
  <div class="thumb-item">
    <a class="thumb-link" href="javascript:void(0);" onclick="thumbnail(6)">
        <img src="https://placehold.jp/f0000f/ffffff/600x300.png" alt="">
    </a>
  </div>
</div>

次にサムネイル用のHTMLを用意。

swiper-slide要素の数だけ、サムネイルも生成します。

aタグを使って、onclick属性を付与。

値に任意の関数(本記事ではthumbnail関数)を指定。

引数にサムネイルの数だけ連番を記述します。

Swiperを実行

// swiper
var slider = new Swiper('.swiper-container', {
  speed: 600,
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

// // slideToメソッドでサムネイルと連動
function thumbnail(index) {
	slider.slideTo(index);
}

次にscript内でswiperを実行します。

実行関数は以下の通りです。

var slider = new Swiper(‘.swiper-container’, {オプション});

次に前章のonclick属性に指定したthumbnail関数を定義。

引数にindexを指定。

slideToメソッドを使い、クリックしたサムネイル要素と同じスライダーのindex要素が表示されるようにします。

CSSで装飾

.swiper-wrapper {
  max-width: 600px;
  width: 100%;
  margin: auto;
}
.swiper-slide img {
  max-width: 100%;
  height: auto;
}
.thumb-list {
  max-width: 600px;
  width: 100%;
  margin: auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.thumb-item {
  flex: 0 0 32%;//1行に表示するサムネイルの数を指定
}
.thumb-item img {
  max-width: 100%;
  height: auto;
}
.thumb-link {
  display: block;
}
.swiper-arrow {
  position: relative;
  max-width: 700px;
  width: 100%;
  margin: auto;
}

最後にCSSで装飾します。

サムネイル要素は親要素にflexboxを指定。

複数行のカラム表示になるようにしてます。

子要素のflexプロパティを調整する事で1行に表示する要素数を指定できます。

以上でサムネイル固定スライダーの完成です。

まとめ

Swiperを使ってサムネイル固定のスライダーを実装する方法について紹介しました。

以上で解説を終わります。