Splide

プログレスバー

・公式サイト：Carousel Progress

script
                  
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();
HTML
CSS
                  
    /* プログレスバーのスタイル */
    .my-carousel-progress {
      background-color: #cccccc;
    }

    .my-carousel-progress-bar {
      background-color: #248cff;
      height: 10px;
      transition: width 1000ms ease;
      width: 0;
    }