【jQuery】画像をフェード切り替えするスライドショーをループしないようにしたい

Question

jQueryで画像がフェードアウト・フェードインして切り替わるスライドショーを実装することができたのですが、以下のやり方ではスライドショーがループしてしまいます。

ループせずに最後の画像で止めたい場合はどうすればいいでしょうか？

なお、こちらのサイトを参考にしました。
https://sedoriplan.com/jquery-fadein-fadeout-image/

<div id="imageSlide">
  <img src="" alt="">
  <img src="" alt="">
  <img src="" alt="">
</div>

$(function(){
	var setImg = '#imageSlide';
	var fadeSpeed = 2000;
	var switchDelay = 4000;

	$(setImg).children('img').css({opacity:'0'});
	$(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);

	setInterval(function(){
		$(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg);
	},switchDelay);
});

Answer 1

setIntervalをとめるのはclearIntervalですね
実際に止めるのはどこでとめるのかによりますね

• 表示→右に移動→次表示

<script>
$(function(){
  var setImg = '#imageSlide';
  var fadeSpeed = 2000;
  var switchDelay = 4000;
  
  $(setImg).children('img').css({opacity:'0'});
  $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);
  var count=0;
  var len=$(setImg).children('img').length;
  var timerId=setInterval(function(){
    count++;
    if(len<=count) clearInteval(timerId);
    $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg);
  },switchDelay);
});

</script>
<div id="imageSlide">
<img src="https://placehold.jp/ff0000/00ffff/150x150.png?text=1" alt="1">
<img src="https://placehold.jp/00ff00/ff00ff/150x150.png?text=2" alt="2">
<img src="https://placehold.jp/0000ff/ffff00/150x150.png?text=3"  alt="3">
</div>

Comments

[KUBO3]

迅速に回答していただきありがとうございます。
とても助かりました！！