jQueryスライドショーで最後のスライドだけ表示時間を長くする方法

Webサイトのトップページなどでよく使われるスライドショー。jQueryプラグインも便利ですが、時には「最後のスライドだけ、もう少し長く表示して特に注目させたい」といった細かい調整が必要になることもありますよね。

この記事では、シンプルなjQueryのコードを使って、スライドショーの最後のスライドだけ表示時間を長くする簡単なカスタマイズ方法をご紹介します。

完成デモ

まずは完成形をご覧ください。Slide1、Slide2は通常の速度で切り替わりますが、Slide3（最後のスライド）だけ表示時間が長くなっているのが分かります。

実装コード

実装はHTML、CSS (SCSS)、JavaScript (jQuery) で行います。

▼HTML

スライドショーの大枠（#slideshow）と、その中にスライド（.slide）を配置するだけのシンプルな構造です。

<div id="slideshow">
	<div class="slide current">Slide1</div>
	<div class="slide">Slide2</div>
	<div class="slide">Slide3</div>
</div>

▼CSS (SCSS)

CSSでは、position: absolute でスライドを重ね、opacity と transition でフェードイン・フェードアウトのアニメーションを設定します。.current クラスが付いたスライドだけが表示（opacity: 1）される仕組みです。

#slideshow { 
	position: relative; width: 300px; height: 300px; 
	.slide { 
		position: absolute; top: 0; left: 0; width: 100%; height: 100%;
		opacity: 0; transition: opacity .75s;
		&.current { opacity: 1; }	
		//装飾
		display: flex; justify-content: center; align-items: center;
		background: #300;
		color: #fff;
		&:nth-child(3n+2) { background: #030; }
		&:nth-child(3n+3) { background: #003; }
	}
}

▼JavaScript (jQuery)

ここが今回のカスタマイズの核となる部分です。

// jQueryが読み込まれていることを確認してください。
$(document).ready(function (){

  //kv_slider
  var kvSlide = function ($element) {
    //変数宣言
    var $children = $element.children(),
        current = 0,
        time = 2000; // 基本の切り替え時間（ミリ秒）
    
    // 最終スライドの表示時間を長くする倍率
    var lastSlideDurationRatio = 1.8; 
    
    // 1番目の要素に、currentクラスを追加
    $children.eq(current).addClass('current');
    
    /** スライドを切り替える関数 */
    function request() { 
      // 現在の要素のcurrentクラスを削除
      $children.eq(current).removeClass('current');
      
      // 次のスライドのインデックスを計算（最後の要素であれば 0 に戻す）
      current = (current === $children.length - 1) ? 0 : current + 1;
      
      // 次の要素にcurrentクラスを追加
      $children.eq(current).addClass('current');
      
      // 次の切り替えまでのインターバル時間を設定
      var interval;
      
      // 要素の最後だけ interval の間隔を長くする（設定した倍率を適用）
      if(current === $children.length - 1 ){
        interval = time * lastSlideDurationRatio;
      } else {
        interval = time;
      }
      
      // 指定したインターバル後に再度 request 関数を実行
      setTimeout(request, interval);
    }
    
    // スライドショーの開始（最初のスライド表示後、基本の時間(time)が経過してから request() を実行）
    setTimeout(request, time);
  };

  // スライドショーを実行（2000ms遅延）
  setTimeout(function() {
    kvSlide($('#slideshow')); 
  }, 2000);

});

コードのポイント解説

このJavaScriptの最大のポイントは、setTimeout（指定時間後に一度だけ関数を実行する命令）を再帰的に使用し、スライドが切り替わるたびに次の実行時間を動的に変更している点です。

• スライドが切り替わる関数 request() が実行されます。
• setInterval ではなく setTimeout を使用することで、現在のタイマーを停止・再開する手間なく、動的にインターバルを変更できます。
• 変数 lastSlideDurationRatio で、最後のスライドの表示時間を調整する倍率（ここでは 1.8）を管理しています。
• if(current === $children.length - 1 ) という条件分岐で、「現在表示されたスライドが、最後のスライドかどうか」をチェックします。
• もし最後のスライドであれば、次のタイマー（＝最後のスライドが表示される時間）を time * lastSlideDurationRatio（ここでは 2秒 × 1.8 = 3.6秒）に設定します。
• それ以外のスライドであれば、通常の time（2秒）を設定します。
• 最後に、新しく設定された interval の時間で、setTimeout(request, interval) を実行し、次のスライド切り替えを予約します。

このように、スライドが切り替わるたびに「次のタイマーの時間」を動的に変更することで、特定のスライドだけ表示時間を変える制御を実現しています。

よくある質問（FAQ）

Q1. スライドショーの切り替え速度を全体的に変更するには？

A1. JavaScriptコード内の time = 2000; の数値（ミリ秒単位）を変更することで調整可能です。例えば「3秒」にしたい場合は time = 3000; に変更してください。最後のスライドの表示時間も、この time の値を基準に計算されます。

Q2. 最後ではなく、特定のスライド（例: 2枚目）だけ時間を長くできますか？

A2. はい、可能です。JavaScriptの if 文の条件を変更します。スライドの番号は0から始まるため、2枚目を長くしたい場合は if(current == 1) のように、判定したいスライドのインデックス番号を指定します。（current は「次に表示されたスライド」の番号であることに注意してください）

Q3. jQueryを使わずに、CSSだけで同じようなことはできますか？

A3. CSSの animation プロパティ（@keyframes）を使えば、スライドショー自体は実装可能です。ただし、「最後のスライドだけ animation-duration（アニメーション時間）を変更する」といった制御は、:last-child 擬似クラスなどを使っても、このロジックのように動的に切り替えるのは複雑になります。スライドごとに表示時間を細かく制御したい場合は、JavaScriptを使うのが確実で簡単な方法です。