「スライドショーの最後の一枚だけ表示時間を長くしてほしいらしいです。対応お願いいたします。」
「承知致しました。」

とても忙しい中で降ってくると、つい「それ必要あります？」なんて気持ちがよぎりますが、必要です。余裕がある時なら必要性に理解が及ぶのですが、嘘みたいに忙しいと、時々ささくれ立つ事もありますね。もちろん笑顔で快く承りました。

Slick.js や swiper.js 等のカルーセルスライダーのプラグインを使用していたら、callbackなんかで現在のスライドの番号(currentSlide とか nextSlide)取ってやればサクッとできるのですが、今回は前回の記事で書いた切り替えスライダーをしようしていたので、カスタマイズが必要でした。

様々なやり方が想定されますが、時間がなく、なるべくわかりやすく、なるべく直感的にという事で、取り急ぎ以下のような形での実装となりました

▼参考サイト

https://www.it-swarm.dev/ja/javascript/%E5%AE%9F%E8%A1%8C%E4%B8%AD%E3%81%ABsetinterval%E3%81%AE%E9%96%93%E9%9A%94%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B/966978471/

「スライドショー 最後の一枚　長く js」
「スライドショー jquery 最後の一枚 秒数」
等で検索。

▼HTML

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

▼SCSS

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

▼JS

$(document).ready(function (){

  //kv_slider
  var kvSlide = function ($element) {
    //変数宣言
    var $children = $element.children(),
        current = 0,
        time = 4000; //切り替えの早さ
    //1番目の要素に、current追加
    $children.eq(current).addClass('current');
    //順番に、current追加（current += 1）。子要素（$children）の数と、current - 1 の数が等しくなったら、currentは0に戻る
    var interval = time; // initial condition
    var run = setInterval(request , interval); // start setInterval as "run"

    function request() { 

      //繰返す処理
      $children.eq(current).removeClass('current');
      current = current === $children.length - 1 ? 0 : current += 1;
      $children.eq(current).addClass('current');

      clearInterval(run); // stop the setInterval()

      // 要素の最後だけ interval の間隔を長くする
      if(current == $children.length - 1 ){
        interval = time*1.8;
      }else{
        interval = time;
      }

      run = setInterval(request, interval); // start the setInterval()

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

});