Swiperにプログレスバーを設定する方法【実装例あり】

2023.01.13
Javascript

今回はSwiperで作成したスライダーに、プログレスバーを設置してみたいと思います。

1. Swiperとは
- 1.1. CDNを利用する場合
- 1.2. ファイルを直接ダウンロードする場合
2. プログレスバーのデモ
3. スライダーの基本形
4. プログレスバーの実装
5. まとめ

Swiperとは

まずSwiperの特徴を簡単にご紹介します。
Swiperはスライダーが簡単に実装できるJavaScriptのライブラリです。

SwiperはjQueryを必要としないので、jQueryが要件として使えない場合でも、問題なく使用できます。
更にオプションも豊富で、使用者も多いため検索しても様々な使用例が出てくるので、用途に合わせたカスタマイズもしやすいです。

Swiperは以下の方法で利用できます。

CDNを利用
ファイルを直接ダウンロード

CDNを利用する場合

下のリンク先がCDNの一覧が記載されているページです。

SwiperのCDNはこちら

ファイルを直接ダウンロードする場合

基本的には下記の2ファイルをダウンロードすればOKです。
・swiper-bundle.min.js
・swiper-bundle.min.css

Swiperの配布場所

プログレスバーのデモ

See the Pen プログレスバー (Swiper) by bst-test-js (@bst-test-js) on CodePen.

このようにプログレスバーを表示させると、画像が切り替わるタイミングが視覚的に分かるようになります。

スライダーの基本形

まずはこのようにHTMLを書きます。

<!-- Swiperの大枠のクラス -->
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="https://tech.bstinc.co.jp/assets/themes/techblog/img/sample1.png" alt=""></div>
    <div class="swiper-slide"><img src="https://tech.bstinc.co.jp/assets/themes/techblog/img/sample2.png" alt=""></div>
    <div class="swiper-slide"><img src="https://tech.bstinc.co.jp/assets/themes/techblog/img/sample3.png" alt=""></div>
  </div>
</div>

次にJSはこのように書いていきます。

var swiper = new Swiper('.swiper', {
  loop: true,
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  }
});

これでスライダーが最低限動くようになったはずです。
ここからプログレスバーを実装していきます。

プログレスバーの実装

プログレスバーを追加する際に必要なHTMLは下記の一行です。

<div class="bar"><span></span></div>

CSSはこのように追加してください。

.bar {
  position: relative;
  width: 100%;
  height: 5px;
  background: #ddd;
  border-radius: 10px;
  margin: 10px auto 0;
  overflow: hidden;
}
.bar span {
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #1c469a;
  border-radius: 10px;
  transform: scaleX(0);
  transform-origin: left center;
  transition-timing-function: linear;
}

ポイントは、transform-originを設定することです。
これによりspan要素に設定してあるプログレスバーが、左側から徐々に増えていく構造にできます。
最後にJSの設定を行います。

var bar = document.querySelector('.bar span');
var swiper = new Swiper('.swiper', {
  loop: true,
  autoplay: {
  delay: 3000,
  disableOnInteraction: false,
  },
  on: {
   slideChangeTransitionStart: function () {
    bar.style.transitionDuration = '0s',
    bar.style.transform = 'scaleX(0)'
   },
   slideChangeTransitionEnd: function () {
    bar.style.transitionDuration = 3000 + 'ms',
    bar.style.transform = 'scaleX(1)'
   },
  }
 });

JSではSwiperに用意されているイベントを使用してプログレスバーを動かします。
slideChangeTransitionStartで、画像が切り替わりアニメーションが開始される時に、プログレスバーを初期化しています。
slideChangeTransitionEndで画像が切り替わった後、プログレスバーを増加させています。