画像カルーセルは無限に逆ループしません。

Question

私は3つの画像を持つHTML5画像カルーセルを作成しています。トランジションはTweenMaxとTimeLineで行います。次の画像と前の画像の2つのクリックイベントがあり、次の画像関数は正しく実行され、無限ループですが、前の関数は画像を一度通過した後に停止します。ここにコードがあります。

HTML：

<div id="expanded-state"> 
    <div id="expanded-exit"></div> 
    <div id="close-btn"></div> 
    <button id="arrow-prev"></button> 
    <button id="arrow-next"></button> 
    <div id="theater"> 
     <div class="theater"></div> 
     <div class="theater"></div> 
     <div class="theater"></div> 
    </div> 
    <div id="cta"></div> 
    <div id="footer"></div> 
    </div> 
</div> 

はCSS：

.theater { 
    width: 970px; 
    height: 345px; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 1; 
} 

.theater:nth-child(1){ 
    background: url(theater-01.jpg); 
} 

.theater:nth-child(2){ 
    background: url(theater-02.jpg); 
} 

.theater:nth-child(3){ 
    background: url(theater-03.jpg); 
} 

JS：

var $slides = $(".theater"); 
var currentSlide = 0; 

function addListeners() { 
    arrowPrev.addEventListener('click', theaterScrollPrev); 
    arrowNext.addEventListener('click', theaterScrollNext); 
} 

function theaterScrollNext() { 

    tm.to($slides.eq(currentSlide), 0.5, {left:"-970px"});   

    if (currentSlide < $slides.length - 1) { 
     currentSlide++; 
    } 
    else { 
     currentSlide = 0; 
    } 

    tm.fromTo($slides.eq(currentSlide), 0.5, {left: "970px"}, {left:"0px"}); 
} 

function theaterScrollPrev() { 

    tm.to($slides.eq(currentSlide), 0.5, {left:"970px"});  

    if (currentSlide < $slides.length - 1) { 
     currentSlide--; 
    } 
    else { 
     currentSlide = 0; 
    } 

    tm.fromTo($slides.eq(currentSlide), 0.5, {left: "-970px"}, {left:"0px"}); 
} 

Answer 1

私は、これはそれを修正するが、それは

function theaterScrollPrev() { 
    console.log('previous clicked') 
    tm.to($slides.eq(currentSlide), 0.5, {left:"970px"});  

    if (currentSlide <= 0) { 
     currentSlide = $slides.length -1; 
    } else { 
    currentSlide--; 
    } 

     tm.fromTo($slides.eq(currentSlide), 0.5, {left: "-970px"}, {left:"0px"}); 
} 

ないなら、私に教えなければならないと考えています

Codepen Fixed