Непоследовательная анимация слайдов в переключателе JavaScript

Question

Я пытаюсь реализовать левую / правую скользящую анимацию внутри оператора переключения JavaScript, и анимация (скользящая влево и вправо без эффекта отскока и без пробелов между изображениями) не активируется последовательно.Кроме того, анимация слайдов по-прежнему активируется при нажатии предыдущей кнопки на первом слайде и при нажатии следующей кнопки на последнем слайде.Этого не должно быть.У кого-нибудь есть мысли?Пожалуйста, смотрите пример кода.

$(function() {
	// USER EDITABLE CONTROLS
	var content = 'img'; // accepts any DOM element - div, img, table, etc...
	var showControls = true; // true/false shows/hides the slider's navigational controls
	var transition = 'slide'; // supports default, fade, slide
	var transitionDuration = .5; // adjust the time of the transition measured in seconds
	
	// VARIABLE DECLARATIONS
	var contentType = $(content);
	var $el = $('#showcase');
	var $leftArrow = '#left_arrow';
	var $rightArrow = '#right_arrow';
	var $load = $el.find(contentType)[0];
	var slideCount = $el.children().length;
	var slideNum = 1;
	
	// PRELOADS SLIDE WITH CORRECT SETTINGS
	$load.className = 'active';
	
	// ADD SLIDER CONTROLS TO PAGE
	if (showControls === true) {
		$('<div id="controls"><a href="#" id="' + $leftArrow.replace('#', '') + '">&laquo; Previous</a> <a href="#" id="' + $rightArrow.replace('#', '') + '">Next &raquo;</a></div>').insertAfter('#showcase');
		$('#controls').find('#left_arrow').addClass('disabled');
	}
	
	// LOGIC FOR SLIDE TRANSITIONS
	function transitions() {
		switch (transition) {
			// FADE TRANSITION
			case 'fade':
				$('.slide').stop().animate({opacity : 0}, transitionDuration*300, function(){
					$('.active').stop().animate({opacity : 1}, transitionDuration*1000);
				});
				break;

			// SLIDE TRANSITION
			case 'slide':
				if (slideNum > 1) {
					$('.slide').stop().animate({left : -160}, transitionDuration*800, function(){
						$('.active').stop().animate({left : 0}, transitionDuration*1000);
					});
				}
				
				if (slideNum < slideCount) {
					$('.slide').stop().animate({left : 160}, transitionDuration*800, function(){
						$('.active').stop().animate({left : 0}, transitionDuration*1000);
					});
				}
				break;

			// DEFAULT TRANSITION
			case 'default':
				break;
		}
	}
	
	// CHECKS FOR FIRST AND LAST INDEX IN THE SLIDER
	function checkSlide() {
		if (slideNum == 1) {
			$($leftArrow).addClass('disabled');
		} else {
			$($leftArrow).removeClass('disabled');
		}
		
		if (slideNum == slideCount) {
			$($rightArrow).addClass('disabled');
		} else {
			$($rightArrow).removeClass('disabled');
		}
	}

	// NAVIGATIONAL LOGIC FOR PREVIOUS/NEXT BUTTONS
	$(document).on('click', $leftArrow, function() {
		if (slideNum > 1) {
			var counter = $('.active').index();
      counter--;
			$('.active').addClass('slide');
			$('.active').removeClass('active');
			transitions();
			$el.find(contentType).eq(counter).addClass('active');
			slideNum--;
			checkSlide();
		}
	})
	
	$(document).on('click', $rightArrow, function() {
		if (slideNum < slideCount) {
			var counter = $('.active').index();
      counter++;
			$('.active').addClass('slide');
			$('.active').removeClass('active');
			transitions();
			$el.find(contentType).eq(counter).addClass('active');
			slideNum++;
			checkSlide();
		}
	})
});

#showcase {
	width: 160px;
	overflow: hidden;
}

img {
	width: 160px;
}

a {
	color: blue;
}

.disabled {
	color: red !important;
}

.slide {
	display: none;
	opacity: 0;
	position: relative;
	left: 0px;
	right: 0px;
}

.active {
	display: block;
	opacity: 1;
	position: relative;
	left: 0px;
	right: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showcase">
	<img class="slide" src="https://picsum.photos/458/354" />
	<img class="slide" src="https://picsum.photos/458/354/?image=306" />
	<img class="slide" src="https://picsum.photos/458/354/?image=626" />
</div>

Answer 1

Как сказано в комментариях, вам нужно исправить свои условные заявления. Некоторое время назад вы установили два обработчика click, один из которых связан (и запускается независимо от каких-либо условий), когда запускается другой обработчик, поэтому анимация слайда все еще активируется при нажатии предыдущей кнопки на кнопке первый слайд и при нажатии следующей кнопки на последнем слайде выпуск.

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

$(function() {
  // USER EDITABLE CONTROLS
  var content = 'img'; // accepts any DOM element - div, img, table, etc...
  var showControls = true; // true/false shows/hides the slider's navigational controls
  var transition = 'slide'; // supports default, fade, slide
  var transitionDuration = .5; // adjust the time of the transition measured in seconds

  // VARIABLE DECLARATIONS
  var contentType = $(content);
  var $el = $('#showcase');
  var $leftArrow = '#left_arrow';
  var $rightArrow = '#right_arrow';
  var $load = $el.find(contentType)[0];
  var slideCount = $el.children().length;
  var slideNum = 1;

  // PRELOADS SLIDE WITH CORRECT SETTINGS
  $load.className = 'active';

  // ADD SLIDER CONTROLS TO PAGE
  if (showControls === true) {
    $('<div id="controls"><a href="#" id="' + $leftArrow.replace('#', '') + '">&laquo; Previous</a> <a href="#" id="' + $rightArrow.replace('#', '') + '">Next &raquo;</a></div>').insertAfter('#showcase');
    $('#controls').find('#left_arrow').addClass('disabled');
  }

  // LOGIC FOR SLIDE TRANSITIONS
  function transitions(impl = null) {
    switch (transition) {
      // FADE TRANSITION
      case 'fade':
        $('.slide').stop().animate({
          opacity: 0
        }, transitionDuration * 300, function() {
          $('.active').stop().animate({
            opacity: 1
          }, transitionDuration * 1000);
        });
        break;

        // SLIDE TRANSITION
      case 'slide':
        if (impl == "next") {
          $('.slide').css("left", '160px');
          $('.slide').stop().animate({
            left: 160
          }, transitionDuration * 800, function() {
            $('.active').stop().animate({
              left: 0
            }, transitionDuration * 1000);
          });
        } else if (impl == "prev") {
          $('.slide').css("left", '-160px');
          $('.slide').stop().animate({
            left: -160
          }, transitionDuration * 800, function() {
            $('.active').stop().animate({
              left: 0
            }, transitionDuration * 1000);
          });
        }
        break;

        // DEFAULT TRANSITION
      case 'default':
        break;
    }
  }

  // CHECKS FOR FIRST AND LAST INDEX IN THE SLIDER
  function checkSlide() {
    if (slideNum == 1) {
      $($leftArrow).addClass('disabled');
    } else {
      $($leftArrow).removeClass('disabled');
    }

    if (slideNum == slideCount) {
      $($rightArrow).addClass('disabled');
    } else {
      $($rightArrow).removeClass('disabled');
    }
  }

  // NAVIGATIONAL LOGIC FOR PREVIOUS/NEXT BUTTONS
  $(document).on('click', $leftArrow, function() {
    if (slideNum > 1) {
      var counter = $('.active').index();
      counter--;
      $('.active').addClass('slide');
      $('.active').removeClass('active');
      transitions('prev');
      $el.find(contentType).eq(counter).addClass('active');
      slideNum--;
      checkSlide();
    }
  })

  $(document).on('click', $rightArrow, function() {
    if (slideNum < slideCount) {
      var counter = $('.active').index();
      counter++;
      $('.active').addClass('slide');
      $('.active').removeClass('active');
      transitions('next');
      $el.find(contentType).eq(counter).addClass('active');
      slideNum++;
      checkSlide();
    }
  })
});

#showcase {
  width: 160px;
  overflow: hidden;
}

img {
  width: 160px;
}

a {
  color: blue;
}

.disabled {
  color: red !important;
}

.slide {
  display: none;
  opacity: 0;
  position: relative;
  left: 0px;
  right: 0px;
}

.active {
  display: block;
  opacity: 1;
  position: relative;
  left: 0px;
  right: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showcase">
  <img class="slide" src="https://picsum.photos/458/354" />
  <img class="slide" style="left: 160px;" src="https://picsum.photos/458/354/?image=306" />
  <img class="slide" style="left: 160px;" src="https://picsum.photos/458/354/?image=626" />
</div>