Bildkarussell wird nicht unendlich rückwärts kreisen

Question

Ich erstelle ein HTML5 Bildkarussell mit drei Bildern. Die Übergänge werden mit TweenMax und TimeLine durchgeführt. Ich habe zwei Klickereignisse, eines für das nächste Bild und eines für das vorherige Bild, die nächste Bildfunktion läuft einwandfrei und ist eine Endlosschleife, aber die vorherige Funktion stoppt, nachdem sie einmal durch die Bilder gegangen ist. Hier ist der Code.

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

Ich glaube, das es beheben sollte, aber mir sagen, ob es nicht

tut

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