• 【デモあり】bxSliderにプログレスバーを設定する方法

【デモあり】bxSliderにプログレスバーを設定する方法

【デモあり】bxSliderにプログレスバーを設定する方法

今回はjQueryプラグイン[bxSlider]でスライダーを作成し、それにプログレスバーを設定していきます。

目次

bxSliderとは

bxSliderの特徴は簡単に設置が可能なこと、レスポンシブ表示に標準で対応していること、オプションが豊富でカスタマイズしやすいこと等です。

bxSliderを使用するにはjQueryが必要にはなりますが、jQueryの利用方法もこの記事で紹介しているので、もし利用方法が分からない際は参考にしてみて下さい。

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

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

CDNを利用する場合

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

bxSliderのCDNはこちら

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

下記のページからZIPファイルをダウンロード後、その中に入っている2ファイルを使用します。
・「dist」>「jquery.bxslider.css」
・「dist」>「jquery.bxslider.min.js」

bxSliderの配布場所

jQueryの導入方法

bxSliderを使用するにはjQueryが必要です。
CDNを利用するか、jQuery本体をダウンロードしてから利用します。
いずれの場合も下記のリンク先から可能です。
ここで最新のバージョンを選択すれば、基本的には問題ありません。

jQueryの配布場所

CDNを利用する場合

<!-- 最新版を選択してください -->
<script src="https://code.jquery.>com/jquery-3.6.3.min.js"></script>

CDNの場合は上記ページから最新バーションのminifiedと書かれたリンクのURLを、そのままタグに書いて設置すれば完了です。

直接ダウンロードして使用する場合

上記ページから最新バーションのminifiedと書かれたリンクから、jsファイルをダウンロードして設置してください。

プログレスバー実装後のデモ

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

こちらのデモを見てもらえば分かるように、スライドがいつ切り替わるのか視覚的に分かるようになっています。

実装方法

HTMLの記述

通常のスライダーを表示させるためのHTMLの他に、プログレスバーを表示させるためのHTMLを記述しています。

<div class="wrapper">
  <ul id="bxslider" class="bxslider">
    <li> <img src="https://tech.bstinc.co.jp/assets/themes/techblog/img/sample1.png" alt=""> </li>
    <li> <img src="https://tech.bstinc.co.jp/assets/themes/techblog/img/sample2.png" alt=""> </li>
    <li> <img src="https://tech.bstinc.co.jp/assets/themes/techblog/img/sample3.png" alt=""> </li>
  </ul>
  <div class="slider-progress"><span></span></div>
</div>

CSSの記述

.slider-progress{
	position: absolute;
	left: 0;
	bottom: -10px;
	width: 100%;
	height: 5px;
  border-radius:10px;
  background: #ccc;
  overflow:hidden;
}
.slider-progress span{
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	height: 100%;
	background: #1c469a; 
}

CSSではプログレスバーの設定をしていますが、これをJSで操作して進捗状況が分かるようにします。

JavaScriptの記述

  $(window).on('load', function() {
    var time = 3;
    var bar = $('.slider-progress span');
    var tick,
      percentTime;
    slider = $('.bxslider');
    slider.bxSlider({
      pager: false,
       //手動で切り替えた際に初期化する処理
      onSlideBefore: function(index) {
        start();
      }
    });
    //進捗繰り返し処理の停止とバーの初期化
    function reset() {
      bar.css({
        width: 0 + '%'
      });
      clearInterval(tick);
    }

    function start() {
      reset();
      percentTime = 0;
      //進捗繰り返し処理の開始
      tick = setInterval(interval, 10);
    }
    //進捗繰り返し処理
    function interval() {
      percentTime += 1 / (time + 0.1);
      bar.css({
        width: percentTime + "%"
      });
      if (percentTime >= 100) {
        slider.goToNextSlide();
        start();
      }
    }
    start();
  });

上記のようにJSを書きます。
細かい部分はコメントに書いてある通りです。
基本的にはbxSliderに用意されているメソッドを使用して制御しています。

まとめ

今回bxSliderで作成したスライダーにプログレスバーを表示できるようにする方法をご紹介しました。
bxSliderでは今回使用したオプション以外にも、様々なオプションが用意されています。
オプションを組み合わせると意外な動作も実装できたりするので、試してみると楽しいかもしれません！

無料WordPressテーマ