Swiper Web制作 スライダー

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

あわせて読みたい
【jQuery不要】スライダープラグイン Swiper.jsの使い方
【2023年最新Ver9】Swiperの使い方とよく使うオプション・カスタマイズ方法を解説

続きを見る

またSwiperには色々カスタマイズが出来るオプションがあるので、そちらも合わせて活用すると実装出来るスライダーの幅が広がります。

あわせて読みたい
【Swiper】カスタマイズ用オプションまとめ一覧
【Swiper】カスタマイズ用オプションまとめ一覧

続きを見る

2023年12月31日まで!5大無料特典あり🎁

コーディングの時給アップにはこちら!

累計1100部突破!レビュー570件!

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’のときに有効なパラメータで、ページネーション用の箇条書きを完全にカスタマイズするためのもの。

 

デモ

そしてこちらがデモになります。

See the Pen
Swiper(ページネーションに番号を表示する)
by junpei (@junpei-sugiyama)
on CodePen.

まとめ

今回はSwiperでページネーションに番号を表示する方法を解説してきました。

JavaScriptはコピペでOKですが、見た目はCSSでデザイン通りに整えましょう。

以上になります。

関連記事slick記事一覧
関連記事Swiper記事一覧
関連記事Splide記事一覧

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1100部以上販売し、レビューは570件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

2023年12月31日まで!5大無料特典あり🎁

販売ページとレビューを見てみる

-Swiper, Web制作, スライダー