Written by Kasumi

Swiperで現在のスライド番号と総数を表示する方法

Swiperを使って、スライダーに現在のスライド番号と総数を表示したい。

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

実装例を元に解説します。

実装サンプル

See the Pen
Swiperで現在のスライド番号と総数を表示
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

スライダー下部に現在のスライド番号と総数が表示されてます。

スライダーを動かすと、現在のスライド数が変更されます。

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

HTMLを用意

<!-- スライダーのコンテナ -->
<div class="swiper">
  <!-- 必要に応じたwrapper -->
  <div class="swiper-wrapper">
    <!-- スライド -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <!--  ページネーション  -->
  <div class="swiper-pagination"></div>
  <!-- 前後の矢印 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

swiperを生成するHTML要素を用意。

スライド番号と総数を生成する為のページネーション要素をdivタグなどで追加。

任意のクラス名(本記事ではswiper-pagination)を付与します。

swiper実行関数内にpaginationを追加

const swiper = new Swiper(".swiper", {
    pagination: {
    el: ".swiper-pagination", // ページネーションのクラス名を指定
    type: "fraction", // ページネーションのtypeを指定
  }
});

swiperを実行してる関数内にpaginationプロパティを追加します。

以下パラメータを付与します。

el
前章で追加したページネーション要素のクラス名を指定。

type
fractionを指定。

以上で実装完了です。

まとめ

Swiperで現在のスライド番号と総数を表示する方法について紹介しました。

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

目次

関連記事

Swiper

Swiperスライダーで外部の関数から動的にスライド位置を変更する方法

更新日:2022.11.25
116
Swiper

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

更新日:2022.11.25
495
Swiper

Swiperのデフォルト矢印を消して、任意の画像に変更する方法

更新日:2022.11.26
105
Swiper

左右に見え隠れするスライダーを高さ固定で実装する方法【swiperを使用】

更新日:2022.11.25
1210