【解説】Swiperでプログレスバーを表示する方法【サンプルあり】

記事内に広告を含みます

パソ君

・Swiperでプログレスバーを表示できる？

こんな疑問にお答えします。

案件によっては、スライダーの枚数をバーで表示したい場合ありますよね。

実はそれSwiperなら簡単に実装可能です。

ジト

すぐにできるよ！

ということで、この記事では「Swiperでプログレスバーを表示する方法」について解説していきます！

swiper自体の作り方については下記記事を参考に↓

2023年2月20日【簡単】Swiperの使い方｜初心者向けに解説【オプション】

この記事でわかること

Swiperでプログレスバーを表示する方法

【解説】Swiperでプログレスバーを表示する方法【サンプルあり】
【解説】Swiperでプログレスバーを表示する方法【サンプルあり】：まとめ

【解説】Swiperでプログレスバーを表示する方法【サンプルあり】

そんなプログレスバーを表示したサンプルがこちら↓

See the Pen swiper　プログレスバーを表示 by jito-coder (@jito-coder) on CodePen.

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide01">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide02">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
        </div>
        <!-- 省略 -->
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal {
  top: auto;
  bottom: 0;
  height: 10px;
}

.swiper-pagination-progressbar {
  background-color: #000066;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background-color: orange;
}

window.onload = function() {
    const swiper = new Swiper(".swiper", {
        spaceBetween: 20,
        slidesPerView: 1,
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            type: "progressbar",
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
}

コードの中で重要な点がこちら↓

通常通りのスライダーを実装
ページネーションのタイプをプログレスバーに
プログレスバーの位置を変える
デザインに合わせて色やサイズを調整

順に解説してきます。

➀：通常通りのスライダーを実装

まず通常通りのスライダーを実装するHTMLを組み立てます。

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide01">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide02">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
        </div>
        <!-- 省略 -->
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

ここに関してはいつも通りでOKです。

➁：ページネーションのタイプをプログレスバーに

次にJavaScriptにて、ページネーションのタイプをプログレスバーに指定します。

pagination: {
    el: ".swiper-pagination",
    // プログレスバーに指定
    type: "progressbar",
},

これだけでプログレスバーとして表示することが可能です。

下記のように追加しました↓

window.onload = function() {
    const swiper = new Swiper(".swiper", {
        spaceBetween: 20,
        slidesPerView: 1,
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            type: "progressbar",
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
}

➂：プログレスバーの位置を変える

先ほどのままでは、上にプログレスバーが表示されます。

ただデザインによっては、下に位置することが多いかと。

そのためCSSにて位置を変える指定をします。

下記クラスに指定すれば位置を変えることが可能です。

.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal {
  top: auto;
  bottom: 0;
}

➃：デザインに合わせて色やサイズを調整

あとはデザインに合わせて色やサイズを変えるだけです。

やり方は下記のクラスに対して、それぞれCSSを当てるだけ↓

/* 位置やサイズを変える */
.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal {
  top: auto;
  bottom: 0;
  height: 10px;
}

/* プログレスバーの背景部分 */
.swiper-pagination-progressbar {
  background-color: #000066;
}

/* プログレスバーの色部分 */
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background-color: orange;
}