animación carrusel de portaobjetos jQuery

Tomas Nosek:

Estoy trabajando en jQuery carrusel. Aquí está mi código:

  // 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>

El problema es que está actuando de manera diferente para el lado izquierdo y derecho. Si hace clic laterales izquierda varias veces, se acaba de mover el deslizador número de veces, según el número de clics a la vez. Si embargo clic varias veces en el lado derecho, que siempre se moverá sólo una vez. Esto se debe a la diapositiva actual está siendo empujado antes de la última diapositiva y no hay diapositivas todavía. Sin embargo, me gustaría que actúe el mismo que el lado izquierdo por lo que debe ser capaz de mover varias veces.

¿Cómo podría lograr que el comportamiento?

vladwoguer:

Trate parando la animación actual y pasar a la siguiente diapositiva.

Se puede utilizar una variable como nextAnimationpara comprobar si la animación se está reproduciendo.

// 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>