JavaScript开关中的幻灯片动画不一致

Question

我试图在javascript switch语句中实现左/右滑动动画，并且动画（左右滑动而没有反弹效果且图像之间没有空格）不能始终如一地激活。此外，当在第一张幻灯片上单击上一个按钮并在最后一张幻灯片上单击下一个按钮时，幻灯片动画仍会激活。这不应该发生。有人有想法吗？请参阅代码示例。

$(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>