Swiperでページネーションを複数使う方法

こんにちは、長谷です！

スライダーライブラリSwiperのアレンジを紹介します！

swiperはデフォルトのオプションでページネーションをつけることができます。

種類は、
1.ドット（Bullets）
デフォルトのスタイルで、スライドの数に応じたドットが表示されます。

2.フラクショナル（Fraction）
現在のスライド番号と総スライド数を表示する形式です。

3.プログレスバー（Progressbar）
スライダーの進行状況をバーで表示します。

の3種類です。

ただし、ひとつのスライダーに対してひとつのページネーションしか設置できません。

そこで今回は、複数のページネーションを実装する方法を紹介します！
デフォルトの機能ではドットのページネーションを使用し、残り２つはJSを追加します。

HTMLはこのようにしています。

   <!-- Swiperのコンテナ -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <!-- 各スライド -->
        <div class="swiper-slide">
          <img src="./img01.jpg" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="./img02.jpg" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="./img03.jpg" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="./img01.jpg" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="./img02.jpg" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="./img03.jpg" alt="" />
        </div>
      </div>

      <!-- メインのページネーション -->
      <div class="swiper-pagination"></div>

      <!-- フラクショナルページネーション -->
      <div class="swiper-pagination-extra"></div>
      
      <!-- プログレスバー -->
      <div class="swiper-pagination-progressbar">
        <div class="swiper-pagination-progressbar-fill"></div>
      </div>

    </div>

JavaScriptの完成形は以下の通りです。

 const mySwiper = new Swiper(".swiper-container", {
      loop: true,
      spaceBetween: 20,
      pagination: {
        el: ".swiper-pagination",
      },
      on: {
        init: function () {
          updateExtraPagination(this);
          updateProgressBar(this);
        },
        slideChange: function () {
          updateExtraPagination(this);
          updateProgressBar(this);
        },
      },
    });

    function updateExtraPagination(swiper) {
      var currentIndex = swiper.realIndex + 1;
      var totalSlides = swiper.slides.length;
      document.querySelector(".swiper-pagination-extra").textContent =
        currentIndex + " / " + totalSlides;
    }

    function updateProgressBar(swiper) {
      var progress = (swiper.realIndex / (swiper.slides.length - 1)) * 100;
      document.querySelector(
        ".swiper-pagination-progressbar-fill"
      ).style.width = progress + "%";
    }

各処理について解説していきます。

Swiperの初期化と設定

var swiper = new Swiper('.swiper-container', {
    pagination: {
        el: '.swiper-pagination',
        clickable: true
    },
    on: {
        init: function () {
            updateExtraPagination(this);
            updateProgressBar(this);
        },
        slideChange: function () {
            updateExtraPagination(this);
            updateProgressBar(this);
        }
    }
});

on: {…}: Swiperのライフサイクルイベントに対するリスナーを設定します。
init: function() {…}: Swiperの初期化時に実行される関数です。 updateExtraPaginationとupdateProgressBar関数を呼び出して、ページネーションとプログレスバーを初期化します。 slideChange: function() {…}: スライドが変更されたときに実行される関数です。
updateExtraPaginationとupdateProgressBarを呼び出して、ページネーションとプログレスバーの表示を更新します。

フラクショナルページネーションの更新

function updateExtraPagination(swiper) {
    var currentIndex = swiper.realIndex + 1;
    var totalSlides = swiper.slides.length;
    document.querySelector('.swiper-pagination-extra').textContent = currentIndex + ' / ' + totalSlides;
}

この関数は、現在のスライドのインデックスと総スライド数を表示するためのフラクショナルページネーションを更新します。
swiper.realIndex: 現在アクティブなスライドのインデックスを取得します。（インデックスは0から始まるので、1を足しています。）
swiper.slides.length: スライドの総数を取得します。
document.querySelector('.swiper-pagination-extra').textContent = currentIndex + ' / ' + totalSlides;: テキストを、現在のスライド番号と総スライド数で更新します。

プログレスバーの更新

function updateProgressBar(swiper) {
    var progress = (swiper.realIndex / (swiper.slides.length - 1)) * 100;
    document.querySelector('.swiper-pagination-progressbar-fill').style.width = progress + '%';
}

この関数は、Swiperのプログレスバーの幅を更新して、スライドの進行状況を反映します。
(swiper.realIndex / (swiper.slides.length - 1)) * 100: 現在のスライドインデックスを総スライド数で割り（最後のスライドを100%とするために-1する）、その結果に100を掛けてパーセンテージとしての進行度を計算します。
document.querySelector('.swiper-pagination-progressbar-fill').style.width = progress + '%';: 計算されたprogress値を使用して、プログレスバー（.swiper-pagination-progressbar-fill要素）の幅を設定しています。
progress変数は現在のスライドの位置を総スライド数に対して割った値（パーセンテージとして）を保持しているため、この値をwidthスタイルに設定することでプログレスバーが現在のスライドに応じた長さに更新されます。

スライドが変わるたびに、この関数が呼ばれてプログレスバーが更新されます。