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

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

実装方法

今回は例として、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);
      }
    });
  }
});

解説

各スライドの表示時間（待機時間）は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

ではまた。

関連記事
【bxslider】オプションを複数設定する方法
【bxslider】スライダーを縦の移動に変更する方法
【bxslider】ページャーの丸を非表示にする方法
【bxslider】読み込み時にスライドが一瞬縦に並んでしまうときの簡単な対処法
誰でも簡単スライドショー！「bxslider」の設置方法【jQuery】