コンテンツスライダーを実装できるjQueryプラグイン「bxSlider」で、ポーズの設定時間をスライド毎に変える方法です。
通常ポーズ時の時間指定はすべて同じものが適用されますが、例えば1枚目は5秒、2枚目は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の指定で、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枚目のポーズ時間は短くなっているように、各スライドのポーズ時間がそれぞれ異なっていると思います。