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

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

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

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

実装方法
解説

実装方法

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

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で次のように記述します。

jQuery

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