图片轮播不会无限反向循环

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

图片轮播不会无限反向循环

image carousel won't infinitely loop in reverse

javascript

gsap