【Swiper】スライダーにプログレスバーを表示させる方法

Swiperでプログレスバーって表示する方法ある？

プログレスバーとは、

長時間かかるタスクの進捗状況がどの程度完了したのかを視覚的・直感的に表示するもの
引用：プログレスバー - Wikipedia

というもので、ローディングで徐々に伸びていくバーのようなものです。

実際見た方が分かるかと思うので、早速見ていきましょう。

Swiperの基本的な使い方についてはこちらの記事を参照下さい。

Swiperスライダーにプログレスバーを表示させる方法

まずは基本となるスライダーはこちらになります。

See the Pen
Swiper（矢印、ドットインジケーター） by junpei (@junpei-sugiyama)
on CodePen.

前後の矢印、ページネーションが表示されているシンプルなスライダーです。

プログレスバーはページネーションのタイプを変えて表示させるので、下に表示されている●はなくなります（前回のスライドの枚数を表示させる時と同じです）

こちらが元のJavaScriptです。

const swiper = new Swiper(".swiper", {
  loop: true,
  // ページネーション
  pagination: {
    el: ".swiper-pagination",
    clickable: true, // クリック有効化
  },
  // 前後の矢印
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

そしてこちらが今回のコードです。

const swiper = new Swiper(".swiper", {
  loop: true,
  // ページネーション
  pagination: {
    el: ".swiper-pagination",
    type: "progressbar", // プログレスバー
    // clickable: true, 無効化
  },
  // 前後の矢印
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

pagination のオプションに type: "progressbar", を追加しました。

またページネーションのタイプをプログレスバーにするとクリックが無効化されるので、クリックを有効化する clickable: true, は削除してOKです。

そしてこちらがプログレスバーを表示させたスライダーです。

See the Pen
Swiper（プログレスバー） by junpei (@junpei-sugiyama)
on CodePen.

上に表示されている青いバーがプログレスバーです。

スライドをさせてみるとどういう物か分かると思います。

プログレスバーの位置を下にする。

デフォルトでは上に表示されますが、下に表示させたい場合は以下のコードを追記します。

/* プログレスバーの位置を下に移動 */
.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal {
  bottom: 0;
  top: auto;
}

そしてこちらが下に移動させたスライダーです。

See the Pen
Swiper（プログレスバー：下に移動） by junpei (@junpei-sugiyama)
on CodePen.

プログレスバーの高さと色を変更

次は一旦位置を上に戻して、今度は高さと色を変更してみます。

以下のコードを追記します。

/* プログレスバーの高さ変更 */
.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal {
  height: 30px;
}
/* プログレスバーの背景色変更 */
.swiper-pagination-progressbar {
  background-color: #ffb6c1;
}
/* プログレスバーの色変更 */
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background-color: #c71585;
}

そしてこちらがプログレスバーの高さと色を変更したスライダーになります。

See the Pen
Swiper（プログレスバー：色、高さ変更） by junpei (@junpei-sugiyama)
on CodePen.