【bxslider】スライドごとに表示時間（待機時間）を設定する方法

つい先日実装する機会がありましたので備忘録がてらに。
コンテンツスライダーでスライドごとに表示時間（待機時間）を変更したい時ってありますよね。1枚目は3秒、２枚目は4秒、最後のスライドだけ10秒みたいな感じで。
ただ、デフォルトの設定だと全て同じ秒数が適用されています。
そこでbxsliderの機能でコールバックと呼ばれるオプションがありますのでこちらを使って実装していきます。

bxsliderの基本的な実装方法やオプションについては下記をご確認ください。

誰でも簡単スライドショー！「bxslider」の設置方法【jQuery】

今回は例として5枚ほどのスライドで実装したと想定して記述してます。

<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を呼び出すだけではなく、下記のような記述で呼び出します。

$(function() {
  var slider = $('#slider').bxSlider(),
      pauseSettings = [1000, 2000, 3000, 4000, 5000];

  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);
      }
    });
  }
});

各スライドの表示時間（待機時間）はpauseSettingsのところで指定しています。今回は5枚のスライドですのでカンマ区切りで5つの数字が指定されています。
1枚目→1000（1秒）
2枚目→2000（2秒）
3枚目→3000（3秒）
4枚目→4000（4秒）
5枚目→5000（5秒）

bxslider大好きマンにとってはうれしいカスタマイズですね。

こちらの実装方法は下記で紹介されたものになります。
jquery - How to set up slide duration at bxslider - Stack Overflow

ではまた。