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

2022年1月23日

スライダーを作成できるJSプラグイン「Swiper」で、以下のようなスライダーを作成する方法を紹介します。

スライド総数を表示
現在表示中のスライド番号を表示

DEMOと実装コード一式を用意していますので、ぜひこの記事を参考にして実装してみてください。

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

以下が今回作成するスライダーの実装DEMOです。

スライドをドラッグまたはスワイプして動作を確認してみてください。

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

スライド下部に、スライド総数、現在表示中のスライド番号が表示されているのが確認できましたね。

次でコピペ用のソースコードを紹介していきます。

【コピペ用】スライド総数と現在のスライド番号を表示するスライダーの実装コード

以下のコードをコピペすることで、実装DEMOと同じスライダーを作成できます。

index.html, style.css, script.jsファイルを作成し、それぞれのコードを貼り付けてください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>スライド総数と現在のスライド番号を表示するSwiperの実装DEMO</title>
    <!-- Swiper CSS CDN読み込み -->
    <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="swiper">
      <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 class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
      </div>
      <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS CDN読み込み -->
    <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

/* スライド本体 */
.swiper-slide {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #6332f6;
  color: #fff;
}

/* ページネーション */
.swiper-pagination {
  color: #fff;
}

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

/* スライド総数 */
.swiper-pagination-total {
}

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

実装コードの紹介は以上です。

次からは実装コードの解説を行いますので、コードの中身を詳しく知りたい方は読み進めてください。

上記の順番で実装コードを解説していきます。

①Swiperを読み込む

まずSwiperを使用するためには、プロジェクト内に読み込む必要があります。

npmでインストールする方法や、アセットをダウンロードして使用する方法もありますが、ここでは一番簡単なCDNを使用する方法で進めていきますね。

CDNで読み込むには、以下の2行を該当箇所に記入するだけでOKです。

<head>
  <!-- head内でCSSのCDNを読み込む -->
  <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <!-- bodyの閉じタグ直前でJSのCDNを読み込む -->
  <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
  <script src="script.js"></script>
</body>

CSSはheadタグ内に、JavaScriptはbody閉じタグの直前に記述してください。

これでSwiperを使うための下準備ができました。

npmでのインストール、アセットを直接ダウンロードして読み込む場合は、Swiperの公式ページから確認してください。

②HTMLの解説

ここからはHTMLのコードを解説していきます。

<div class="swiper">
  <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 class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
  </div>
  <div class="swiper-pagination"></div>
</div>

Swiperの公式ページに用意されているタグを参考にしています。

全体を囲うdivにswiper、スライド全体を囲うdivにswiper-wrapper、個々のスライドにはswiper-slideクラスをそれぞれ付与します。

そしてスライド総数と現在のスライド番号の表示には、Swiperのpagination機能を使用するので、swiper-paginationクラスがついた空のdivを用意します。

これでHTMLが完成しましたので、次でCSSを紹介していきます。

③CSSの解説

CSSはDEMOの見た目を整えるためだけなので、飛ばしていただいても構いません。

/* スライド本体 */
.swiper-slide {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #6332f6;
  color: #fff;
}

/* ページネーション */
.swiper-pagination {
  color: #fff;
}

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

/* スライド総数 */
.swiper-pagination-total {
}

もしスライド総数のテキスト、現在のスライド番号のテキストにスタイルを当てたい場合は、Swiper側で自動的に追加される以下のクラスに対してスタイルを記述します。

swiper-pagination-current…現在のスライド番号
swiper-pagination-total…スライド総数

以上でCSSは終わりです。

④JavaScriptの解説

最後に、JavaScriptの解説をしていきます。

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

Swiperでは多くのオプションが用意されており、ここではloopとpaginationを設定しています。

※loopは任意ですので自由に変更してください。

paginationのelには、HTML上のどこにページネーションを表示するかを指定します。

HTMLで、swiper-paginationというクラスがついたdivタグを用意しましたね。

このタグの中にスライド番号を表示したいので、elの値にはクラス名をそのまま指定します。

次にtypeの値をfractionに設定します。

typeのデフォルト値はbulletsなので、何も指定しない場合は丸が表示されます。