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で現在のスライド番号と総数を表示する方法について紹介しました。
以上で解説を終わります。
目次