【簡単】Swiperで表示中のスライド数／総数を表示する【サンプルあり】

2023年12月4日

記事内に広告を含みます

パソ君

・Swiperでスライドの総数を表示することできる？

こんな疑問にお答えします。

案件によってはスライダーのドットを、スライドの総数と表示中のスライド数を反映したい場合があります。

実はそれSwiperなら簡単に実装可能です。

ジト

すぐにできるよ！

ということで、この記事では「Swiperで表示中のスライド数／総数を表示する」について解説していきます！

swiper自体の作り方については下記記事を参考に↓

2023年2月20日【簡単】Swiperの使い方｜初心者向けに解説【オプション】

この記事でわかること

Swiperで表示中のスライド数／総数を表示する

【簡単】Swiperで表示中のスライド数／総数を表示する【サンプルあり】
【簡単】Swiperで表示中のスライド数／総数を表示する【サンプルあり】：まとめ

【簡単】Swiperで表示中のスライド数／総数を表示する【サンプルあり】

そんなスライド数と総数を表示したサンプルがこちら↓

See the Pen swiper　スライド総数 by jito-coder (@jito-coder) on CodePen.

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide01">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide02">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
        </div>
        <!-- 省略 -->
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

/* ページネーション */
.swiper-pagination {
  font-size: 30px;
  font-weight: 700;
  color: aqua;
}

/* 現在のスライド番号 */
.swiper-pagination-current {
  color: red;
}

/* スライド総数 */
.swiper-pagination-total {
  color: green;
}

window.onload = function() {
    const swiper = new Swiper(".swiper", {
        spaceBetween: 20,
        slidesPerView: 1,
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            type: "fraction",
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
}

コードの中で重要な点がこちら↓

通常通りのスライダーを実装
ページネーションのタイプを変える
CSSでスタイルを指定

順に解説してきます。

➀：通常通りのスライダーを実装

まず通常通りのスライダーを実装するHTMLを組み立てます。

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide01">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide02">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
        </div>
        <!-- 省略 -->
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

ここに関してはいつも通りでOKです。

➁：ページネーションのタイプを変える

ここが一番重要。

実はJavaScriptのコードにて、ページネーションのオプションを設定するだけで、スライド数で表示することができます。

下記のようにページネーションのタイプを「type: “fraction”,」と指定。

window.onload = function() {
    const swiper = new Swiper(".swiper", {
        spaceBetween: 20,
        slidesPerView: 1,
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            type: "fraction",
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
}

これでドットの丸ではなく、数値で表示することができました。

➂：CSSでスタイルを指定

あとはドットをCSSでカスタマイズすればOKです。

今回は変更例がわかりやすいように下記のスタイルを指定しました↓

/* ページネーション */
.swiper-pagination {
  font-size: 30px;
  font-weight: 700;
  color: aqua;
}

/* 現在のスライド番号 */
.swiper-pagination-current {
  color: red;
}

/* スライド総数 */
.swiper-pagination-total {
  color: green;
}

ここはデザインや仕様に合わせて調整しましょう。