jQueryのスライドで、最後の画像で次へのボタンをクリックしたときに最初の画像に戻りたい。

jQueryにてスライドの実装を行っていますが、最後の画像にて次へのボタンをおしたときに最初の画像に戻すことができません。最初の画像の時にさらに前へのボタンを押すと最後の画像になるようにはできています。

html
1コード
2    <div class="slide-wrapper">
3      <div class="change-btn-wrapper">
4        <div class="change-btn prev-btn">＜</div>
5        <div class="change-btn next-btn">＞</div>
6      </div>
7      <ul class="slides">
8        <li class="slide active"><img src="in.jpg" alt=""></li>
9        <li class="slide"><img src="za.jpg" alt=""></li>
10        <li class="slide"><img src="me.jpg" alt=""></li>
11        <li class="slide"><img src="na.jpg" alt=""></li>
12        <li class="slide"><img src="desk.jpg" alt=""></li>
13        <li class="slide"><img src="out.jpg" alt=""></li>
14      </ul>
15      <div class="index-btn-wrapper">
16        <div class="index-btn">〇</div>
17        <div class="index-btn">〇</div>
18        <div class="index-btn">〇</div>
19        <div class="index-btn">〇</div>
20        <div class="index-btn">〇</div>
21        <div class="index-btn">〇</div>
22      </div>
23    </div>

jQuery
1
2コード
3$(function(){
4  $('.index-btn').click(function(){
5    $('.active').removeClass('active');
6
7    var clickedIndex = $('.index-btn').index($(this));
8
9    $('.slide').eq(clickedIndex).addClass('active');
10
11  });
12
13  $('.change-btn').click(function(){
14    var $displaySlide = $('.active');
15
16    $displaySlide.removeClass('active');
17
18    if($(this).hasClass('next-btn')){
19      $displaySlide.next().addClass('active');
20    }else{
21      $displaySlide.prev().addClass('active');
22    }
23
24    var slideIndex =$('.slide').index($('.active'));
25
26    if(slideIndex < 0){
27      $('.slide:last').addClass('active');
28    }else if(slideIndex > $('.slide').length-1){
29      $('.slide:first').addClass('active');
30    }　
31
32  });
33
34
35});
36

css
1コード
2ul{
3list-style:none;
4}
5
6.slide-wrapper{
7  text-align: center;
8
9}
10
11.change-btn-wrapper{
12  font-size: 2em;
13}
14
15.change-btn-wrapper:after{
16  content: "";
17  clear: both;
18}
19
20.prev-btn{
21  cursor: pointer;
22  float: left;
23}
24
25.next-btn{
26  cursor:pointer;
27  float:right;
28}
29
30.slides{
31  padding-left: 0;
32}
33
34.slide{
35  display: none;
36}
37
38.active{
39  display: block;
40}
41
42.index-btn{
43  display: inline-block;
44}
45

※jQueryは<head>内にCDNで、jQueryのファイルは</body>タグの直前に配置しています。

jQueryのelse ifの条件が、『最後の画像（.slide)に.activeがついている時に再度、.next-btnを押したら』
という事になればいいと思うのですが、うまく実装できません。

記載したコードでは、そもそも変数slideIndexが実際にある.slideのインデックス番号までしか取得しないと思うので上記コードのelse if内の条件が満たされる事がないと思いますが、代替案が分かりません。

そもそもslideIndexをインデックス番号の取得ではなくて、var slideIndex = 0;　にして、
slideIndex ++;での条件処理も試してみましたが、.change-btnの実装はできても、今度は.index-btnの方が作動しなくなったりしました。

結局、今上記のコードでelse if内の条件式さえ変更すればいいのではと戻ってきました。
ちなみに、if(slideIndex <0 )の部分がなぜ最後の要素(.slide)に.activeを付与できるのかが理解できていません。そもそも変数slideIndexは0より小さい数は取得しないと思うのですが、なぜか最後の要素に.activeを付与できてしまっています。

この点も、教えていただけると助かります。
恐れ入りますが、宜しくお願い致します。