在到达最后一个幻灯片后，我该如何使滑块回到第一辆幻灯片，反之亦然

Question

我目前正在尝试向自己教授JavaScript，现在我正处于构建滑块的中间。到目前为止，我已经设法弄清楚如何使滑块左右滑动。到目前为止，我的问题是，我如何使滑块在到达最后一个幻灯片后回到第一台幻灯片，反之亦然。

这是我一直在研究的代码。

$(document).ready(function() {
  var totalSlides = $('.slides li').length,
    slidesWidth = $('.slides li').width(),
    slideContainer = $('.slides');
  slideCount = 0;
  slideItems = $('.slides li');
  slideContainer.width(slidesWidth * totalSlides);
  $('.buttons .next').on('click', function() {
    nextSlide();
  });
  $('.buttons .prev').on('click', function() {
    prevSlide();
  });
  function nextSlide() {
    slideCount++;
    if (slideCount <= totalSlides) {
      slideCount++;
      console.log(slideCount);
      slideItems.animate({
        left: '-=' + slidesWidth
      }, 200);
    } else if (slideCount === totalSlides) {
      slideCount = 0;
      slideItems.animate({
        left: '+=' + slideContainer
      }, 200);
    }
  }
  function prevSlide() {
    if (totalSlides >= slideCount) {
      slideCount--;
      console.log(slideCount);
      slideItems.animate({
        left: '+=' + slidesWidth
      }, 200);
    }
  }
  // function resetSlides() {
  //    if ( slideCount === totalSlides ) {
  //        slideCount = 0;
  //        slideItems.animate({
  //            left: '+=' + slideContainer
  //        }, 200);
  //    }
  // }
})

.wrapper {
  max-width: 1440px;
  margin: 0 auto;
}
.timeline-container {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  height: 300px;
  .slides {
    position: absolute;
    background-color: #ccc;
    width: 1440px;
    max-height: 300px;
    top: 0;
    left: 0;
    li {
      float: left;
      max-width: 1440px;
      width: 100%;
      height: 300px;
      position: relative;
    }
  }
  .buttons {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 10;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="timeline-container">
    <ul class="slides">
      <li>
        <div class="image">
        </div>
        <div class="content">
          1965
        </div>
      </li>
      <li>
        <div class="image">
        </div>
        <div class="content">
          1968
        </div>
      </li>
      <li>
        <div class="image">
        </div>
        <div class="content">
          1969
        </div>
      </li>
    </ul>
    <ul class="buttons">
      <li class="prev">&lt;</li>
      <li class="next">&gt;</li>
    </ul>
  </div>
</div>

Answer 1

尝试此代码

function gotoSlide(position){
if(position === 'first'){
    console.log(slideCount);
    slideItems.animate({
        left: '+=' + 0
    }, 200);
    slideCount=0;
}
else{
    console.log(slideCount);
    slideItems.animate({
        left: '+=' + slidesWidth*(totalSlides-1)
    }, 200);
    slideCount=totalSlides;
}
}

并在按钮上调用gotoslide（your position）。