【Swiper】ページネーションに番号を表示する方法

Swiperのスライダーでページネーションに番号を表示できる？

スライダーの下に表示される小さな●（ドット）をページネーションと呼びますが、これを番号で表示する方法を解説します。

Swiperの基本的な使い方についてはこちらの記事を参照下さい。

Swiperでページネーションに番号を表示する方法

まずは基本となるスライダーを見てみます。

See the Pen
Swiper（矢印、ドットインジケーター） by junpei (@junpei-sugiyama)
on CodePen.

前後の矢印、ページネーションが表示されているシンプルなスライダーです。

このページネーションに番号を表示させたいと思います。

コード解説

それではコードを解説していきます。

HTML

まずHTMLはこちらです。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="画像パス1" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="画像パス2" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="画像パス3" alt="" />
    </div>
  </div>
  <!-- ページネーション -->
  <div class="swiper-pagination"></div>
  <!-- 前後の矢印 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

これは基本形と同じです。

CSS

CSSはこちらです。

/* ページネーション共通のスタイル */
.swiper-pagination-bullet {
  background-color: #333;
  color: #fff;
  font-size: 16px;
  height: 24px;
  line-height: 1.5;
  transition: transform .2s linear;
  width: 24px;
}
/* 現在のページネーションのスタイル */
.swiper-pagination-bullet-active {
  background-color: #fff;
  color: #333;
  transform: scale(1.4);
}
/* ページネーションの余白(位置) */
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 10px 30px;
}
/* 画像のサイズ調整 */
.swiper-slide img {
  height: auto;
  width: 100%;
}

CSSは書かなくても番号は表示されますが、見た目が崩れるのでここで調整します。

JavaScript

そしてJavaScriptはこちら。

const swiper = new Swiper(".swiper", {
  loop: true, // ループさせる
  autoplay: { // 自動再生
    delay: 2000, // 2秒後に次のスライド
    disableOnInteraction: false, // 矢印をクリックしても自動再生を止めない
  },
  // ページネーション
  pagination: {
    el: ".swiper-pagination",
    type: "bullets", // ページネーションをドットにする
    clickable: true, // ページネーションをクリック可能にする
    renderBullet: function (index, className) {
      // ページネーションに番号を表示
      return '<span class="' + className + '">' + (index + 1) + "</span>";
    },
  },
  // 前後の矢印
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

ここで重要なのはrenderBulletになります。

renderBullet

typeが’bullets’のときに有効なパラメータで、ページネーション用の箇条書きを完全にカスタマイズするためのもの。