スライドショーの最後の画像にいったときに最初の画像に戻りたい

Question

progateのjQuery上級編をアレンジしてスライドショーをつくっています。
nextボタンで次の画像、prevボタンで前の画像に行けるようになっています。

##実現したいこと
nextボタンで最後まで行ったときに最初の画像に、prevボタンで最初まで行ったときに最後の画像に行くようにしたいです。

##やったこと
自分なりに考えてコードを書いたのですが、思うように動きません。
ちなみに、画像は基本、display:noneで非表示にし、activeクラスが付いたときにdisplay:blockで表示されるようになっています。

 <ul class="images">
    <li class="slide-image active"><img src="img/mainvisual.png" alt=""></li>
    <li class="slide-image"><img src="img/sky.jpg" alt=""></li>
    <li class="slide-image"><img src="img/beach.jpg" alt=""></li>
    <li class="slide-image"><img src="img/mainvisual.png" alt=""></li>
    <li class="slide-image"><img src="img/sky.jpg" alt=""></li>
 </ul>

 <!-- ボタン -->
<img src="img/arrow-prev.svg" alt="" class="change prev-btn">
<img src="img/arrow-next.svg" alt="" class="change next-btn">

.slide-image {
 　　　display: none;
}
.active {
      display: block;
    }

window.addEventListener('DOMContentLoaded', function() {
    $('.change').click(function() {
       var $displaySlide = $('.active');
       var $slideIndex = $('.slide-image').index('.active');
       $displaySlide.removeClass('active');
       if($(this).hasClass('next-btn')) {
           $displaySlide.next().addClass('active');
       } else if ($slideIndex == $('.images').eq(length)){
        $('images').eq(0).addClass('active');
       } else if ($slideIndex == $('.images').eq(0)){
        $('images').eq(length).addClass('active');
    } else {
        $displaySlide.prev().addClass('active');

       }
       
       
       });
    });

Answer 1

###回答

javascriptのみいくつかコード修正させて頂きました。

window.addEventListener('DOMContentLoaded', function() {
    $('.change').click(function() {
      　var $displaySlide = $('.active');
      　var $slideIndex = $('.slide-image').index($('.active')); //indexの中身はオブジェクト
      　$displaySlide.removeClass('active');
      　var length = $('.slide-image').length; //画像の枚数を取得

      　if($(this).hasClass('next-btn')) { //Nextボタンが押されたら
          　if($slideIndex == length-1){ //最終画像だったら
            　$('.slide-image').eq(0).addClass('active'); //1番目の画像を表示
          　}else{ //最終画像でない場合
            　$displaySlide.next().addClass('active'); //次の画像を表示
          　}
      　} else{ //Prevボタンが押されたら
            if($slideIndex == 0){ //1番目の画像だったら
              $('.slide-image').eq(length-1).addClass('active'); //最後の画像を表示
            }else{ //1番目の画像出ない場合
              $displaySlide.prev().addClass('active'); //次の画像を表示
            }
      　}
    });
});

以上

Comments

[kaaaarin]

無事に実装できました！ありがとうございます。コメントまで書いていただいて、とても分かりやすいです。