Web制作 スライダー

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

【Swiper】スライダーにプログレスバーを表示させる方法
Swiperでプログレスバーって表示する方法ある?

プログレスバーとは、

長時間かかるタスクの進捗状況がどの程度完了したのかを視覚的・直感的に表示するもの

引用:プログレスバー - Wikipedia

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

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

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

jQuery不要】スライダープラグイン Swiper.jsの使い方

効率よくコーディングしたい人はこちら

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.

以上になります。

あまり使う機会はないかも知れませんが、位置、色、高さなどカスタマイズ可能なので、もし使う機会があればこの記事を思い出して貰えればと思います。

 

コーディング案件の単価と作業効率を上げる!

Brainランキング1位獲得 & 3日で500部突破

クチコミ約280件(平均スコア

今だけ!5大特典あり🎁

-Web制作, スライダー
-