jQuery анимация слайдов карусели

Question

Я работаю на jQuery карусели. Вот мой код:

  // CAROUSEL
  $('#left-arrow').click(previousSlide);
  $('#right-arrow').click(nextSlide);

function nextSlide() {
    var $currentSlide = $('#carousel .slide-image:first');
    var width = $currentSlide.width();
    var $lastSlide = $('#carousel .slide-image:last')
    $currentSlide.animate({ 'margin-left': -width }, 1000, function() {
        $currentSlide.remove().css({ 'margin-left': '0px' });
        $lastSlide.after($currentSlide);
    });
  }

  function previousSlide() {
    var $currentSlide = $('#carousel .slide-image:first');
  	var width = $currentSlide.width();
    var $last = $('#carousel .slide-image:last');
    $last.remove().css({ 'margin-left': -width });
    $currentSlide.before($last);
    $last.animate({ 'margin-left': '0px' }, 1000);
  }

/* CAROUSEL */
#slide1 {
  background-color: red;
}

#slide2 {
  background-color: blue;
}

#slide3 {
  background-color: magenta;
}


#carousel {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100vw;
  height: 75vh;
}

.slide-image {
  width: 100vw;
  height: 75vh;
  background-position: center;
  background-size: cover;
  display: inline-block;
}


.arrow {
  width: 2%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

#right-arrow {
  right: 30px;
}

#left-arrow {
  left: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section id="carousel">
      <div class="arrow" id="left-arrow">L</div>
      <div class="arrow" id="right-arrow">R</div>

      <div class="slide-image" id="slide1">
      </div>

      <div class="slide-image" id="slide2">
      </div>
      
      <div class="slide-image" id="slide3">
      </div>
    </section>

Проблема в том, что он действует по-разному для левой и правой стороны. Если вы нажмете левую сторону несколько раз, он просто переместит ползунок несколько раз, в зависимости от количества нажатий одновременно. Однако если вы щелкнете несколько раз справа, он всегда будет двигаться только один раз. Это связано с тем, что текущий слайд помещается перед последним слайдом, а слайд пока отсутствует. Однако я бы хотел, чтобы он действовал так же, как левая сторона, чтобы он мог двигаться несколько раз.

Как мне добиться такого поведения?

Answer 1

Попробуйте , остановите текущую анимацию и перейдите к следующему слайду.

Вы можете использовать переменную, например nextAnimation, чтобы проверить, продолжает ли анимация воспроизводиться.

// CAROUSEL
  $('#left-arrow').click(previousSlide);
  $('#right-arrow').click(nextSlide);
  
  var nextAnimation = false;

function nextSlide() {
    var $currentSlide = $('#carousel .slide-image:first');
    var width = $currentSlide.width();
    var $lastSlide = $('#carousel .slide-image:last');
    if(nextAnimation) {
      $currentSlide.stop();
      $currentSlide.remove().css({ 'margin-left': '0px' });
      $lastSlide.after($currentSlide);
      $currentSlide = $('#carousel .slide-image:first');
      width = $currentSlide.width();
      $lastSlide = $('#carousel .slide-image:last');
    }
    nextAnimation = true;
    $currentSlide.animate({ 'margin-left': -width }, 1000, function() {
        $currentSlide.remove().css({ 'margin-left': '0px' });
        $lastSlide.after($currentSlide);
        nextAnimation = false;
    });
  }

  function previousSlide() {
    var $currentSlide = $('#carousel .slide-image:first');
  	var width = $currentSlide.width();
    var $last = $('#carousel .slide-image:last');
    $last.remove().css({ 'margin-left': -width });
    $currentSlide.before($last);
    $last.animate({ 'margin-left': '0px' }, 1000);
  }

/* CAROUSEL */
#slide1 {
  background-color: red;
}

#slide2 {
  background-color: blue;
}

#slide3 {
  background-color: magenta;
}


#carousel {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100vw;
  height: 75vh;
}

.slide-image {
  width: 100vw;
  height: 75vh;
  background-position: center;
  background-size: cover;
  display: inline-block;
}


.arrow {
  width: 2%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

#right-arrow {
  right: 30px;
}

#left-arrow {
  left: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section id="carousel">
      <div class="arrow" id="left-arrow">L</div>
      <div class="arrow" id="right-arrow">R</div>

      <div class="slide-image" id="slide1">1
      </div>

      <div class="slide-image" id="slide2">2
      </div>
      
      <div class="slide-image" id="slide3">3
      </div>
    </section>