изображение карусель не будет бесконечно петля в обратном

Question

Я создаю карусель изображений HTML5 с тремя изображениями. Переходы выполняются с помощью TweenMax и TimeLine. У меня два события щелчка, один для следующего изображения и один для предыдущего изображения, следующая функция изображения работает правильно и представляет собой бесконечный цикл, но предыдущая функция останавливается после того, как она проходит через изображения один раз. вот код.

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