プログレスバーとは、
長時間かかるタスクの進捗状況がどの程度完了したのかを視覚的・直感的に表示するもの
というもので、ローディングで徐々に伸びていくバーのようなものです。
実際見た方が分かるかと思うので、早速見ていきましょう。
Splideの基本的な使い方についてはこちらの記事を参照下さい。
【2024年最新】Splideの使い方とよく使うオプション・カスタマイズ方法を解説
続きを見る
- 完全無料
- 30日間でWeb制作を学べる
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 毎日人数制限ありの先着制
(有料になっていたらすいません🙇♂️)
Splideスライダーにプログレスバーを表示させる方法
まずは基本となるスライダーを見てみましょう。
See the Pen
Splide:基本形 by junpei (@junpei-sugiyama)
on CodePen.
前後の矢印、ページネーションが表示されているシンプルなスライダーです。
このスライダーの下にプログレスバーを表示させたいと思います。
コード解説
それではコードを解説していきます。
HTML
まずHTMLはこちらです。
<div class="splide" role="group" aria-label="プログレスバーを表示">
<div class="splide__track">
<div class="splide__list">
<div class="splide__slide">
<img src="画像パス1" alt="" />
</div>
<div class="splide__slide">
<img src="画像パス2" alt="" />
</div>
<div class="splide__slide">
<img src="画像パス3" alt="" />
</div>
</div>
</div>
<!-- プログレスバー -->
<div class="my-carousel-progress">
<div class="my-carousel-progress-bar"></div>
</div>
</div>
これは基本形と違うのは最後手前の3行になります。
CSS
CSSはこちらです。
/* プログレスバーのスタイル */
.my-carousel-progress {
background-color: #ccc;
}
.my-carousel-progress-bar {
background-color: greenyellow;
height: 10px;
transition: width 1000ms ease;
width: 0;
}
/* スライドのサイズ調整 */
.splide__slide img {
height: auto;
width: 100%;
}
HTMLで書いたコードに対してスタイルをあてます。
ポイントはtransition
の時間で、ここJavaScriptのspeed
と同じ数字にしましょう。
そうしないとスライドの移動時間とプログレスバーの動く時間が合わなくなります。
色や高さは自由に変更して下さい。
JavaScript
そしてJavaScriptはこちらです。
const splide = new Splide(".splide", {
autoplay: true, // 自動再生
type: "loop", // ループさせる
pagination: false, // ページネーションを非表示
pauseOnHover: false, // カーソルが乗ってもスクロールを停止させない
pauseOnFocus: false, // 矢印をクリックしてもスクロールを停止させない
interval: 2000, // 自動再生の間隔
speed: 1000, // スライダーの移動時間
});
const bar = splide.root.querySelector(".my-carousel-progress-bar");
// Splideの初期化が終わった際、またはスライドが切り替わる際にバーの長さを更新する
splide.on("mounted move", function () {
const end = splide.Components.Controller.getEnd() + 1;
const rate = Math.min((splide.index + 1) / end, 1);
bar.style.width = String(100 * rate) + "%";
});
splide.mount();
JavaScriptはclass名だけ確認すればコピペで大丈夫で、あとは最初にある通常のオプションで調整をしましょう。
ページネーションは今回非表示にしています。
デモ
そしてこちらがデモになります。
See the Pen
Splide:プログレスバーを表示 by junpei (@junpei-sugiyama)
on CodePen.
スライダーの下に表示されているのがプログレスバーになります。
今回は分かりやすくするために高めにしてあります。
まとめ
今回はSplideでプログレスバーを表示させる方法を解説してきました。
HTML・CSS・JavaScriptと全て追記する必要があるのでちょっと難しいかも知れませんが、とりあえずコピペして表示されるか確認してみましょう。
以上になります。
関連記事slick記事一覧
関連記事Swiper記事一覧
関連記事Splide記事一覧