bxSliderでポーズ設定をスライド毎に変更する方法

Tips

bxSliderでポーズ設定をスライド毎に変更する方法

使う機会あるかもなので備忘録。
コンテンツスライダーを実装できるjQueryプラグイン「bxSlider」で、ポーズの設定時間をスライド毎に変える方法です。
通常ポーズ時の時間指定はすべて同じものが適用されますが、例えば1枚目は5秒、2枚目は10秒といったように何らかの理由でスライド毎にポーズの設定時間を変えたいというときに使えます。

bxSliderの基本的な実装方法をはじめ、各オプションやコールバックに関しても下記公式サイトで確認できるので省略します。


今回は例として5枚のスライドを使用していた場合のもので、HTMLは単純に以下のようにしておきます。

HTML

<ul id="slider">
  <li><img src="slide01.jpg"></li>
  <li><img src="slide02.jpg"></li>
  <li><img src="slide03.jpg"></li>
  <li><img src="slide04.jpg"></li>
  <li><img src="slide05.jpg"></li>
</ul>

次にjQueryの指定で、bxSliderを単純に呼び出すだけでなく下記のような形で呼び出します。
オプションがいくつか設定してありますが、その中で重要なのはpause, startSlide, onSlideAfterになるので、その他のautopagerといったものは実装したい内容に合わせて変更して問題ないです。

jQuery

$(function() {
  var slider = $('#slider').bxSlider(),
      pauseSettings = [2500, 5000, 10000, 500, 2500];

  differentPauseSlider(0);
  function differentPauseSlider(startSlide) {
    slider.reloadSlider({
      auto: true,
      pager: false,
      controls: false,
      pause: pauseSettings[startSlide],
      startSlide: startSlide,
      onSlideAfter: function($slideElement, oldIndex, newIndex) {
        differentPauseSlider(newIndex);
      }
    });
  }
});

各スライドのポーズ時間設定は上記コードでハイライト表示している配列部分で指定し、ここでスライドの枚数分だけカンマ区切りで数値を記述していきます。
なので、今回は例として5枚のスライドになるのでカンマ区切りで5つの数字を指定してあげます。
記述したものは先頭からpauseとして設定されていくので、このサンプルコードを使用した場合はそれぞれのスライドは下記のような形でそれぞれpauseが設定されていきます。

  • 1枚目 → pause: 2500
  • 2枚目 → pause: 5000
  • 3枚目 → pause: 10000
  • 4枚目 → pause: 500
  • 5枚目 → pause: 2500

実際の動きについては以下デモで確認でき、わかりやすいところでは3枚目のポーズ時間は長く、逆に4枚目のポーズ時間は短くなっているように、各スライドのポーズ時間がそれぞれ異なっていると思います。


あらかじめこういった異なるポーズ時間を設定する機能が用意されているプラグインもありますし、わざわざbxSliderにこだわる必要はもちろんありませんが、何らかの理由でbxSliderを利用する必要があってこのような動きを実装したいときはこの方法で実装することができます。

こちらの実装方法は下記で紹介されていたものになります。

Close the search window,
please press close button or esc key.