jquery动画幻灯片放映没有动画

Question

我有以下代码用于图像滑块。它有点复杂，因为我想在页面上使用滑块代码用于多个滑块元素。请参见下面一个滑块的代码：
我所遇到的问题在底部有所描述。

$(document).ready(function(){
  $('.vertical_img').first().addClass('display currentvertical_img').removeClass('invisable');
	$('.horizontal_img').first().addClass('display currenthorizontal_img').removeClass('invisable');
	$('.diagonal_img').first().addClass('display currentdiagonal_img').removeClass('invisable');
	
	// image slider interaction with user
	$('.right').click(function(){
		next($(this).data('id'));
	});
	$('.left').click(function(){
		previous($(this).data('id'));
	});
});


function next(img_class){
	var count;
	$('.current'+img_class).animate({left: 0}, 500, function(){
		console.log("animated?");
		$('.current'+img_class).removeClass('display current'+img_class).addClass('invisable previous'+img_class);

		if($('.previous'+img_class).is(':last-child')) {
			count = $('.'+img_class).first().data('num');
			$('.'+img_class).first().removeClass('invisable').addClass('display current'+img_class);
		}
		else{
			$('.previous'+img_class).next().addClass('display current'+img_class).removeClass('invisable');
			count = $('.previous'+img_class).next().data('num');
		}
		$('.'+img_class+'_slider').text(count+'/4');
		$('.previous'+img_class).removeClass('previous'+img_class);
	});
}

function previous(img_class){
	var count;

	$('.current'+img_class).removeClass('display current'+img_class).addClass('invisable previous'+img_class).animate({right: 0});
	if ( $('.previous'+img_class).is(':first-child')) {
		count = $('.'+img_class).last().data('num');
		$('.'+img_class).last().removeClass('invisable').addClass('display current'+img_class);
	}
	else{
		$('.previous'+img_class).prev().addClass('display current'+img_class).removeClass('invisable');
		count = $('.previous'+img_class).prev().data('num');
	}
	$('.'+img_class+'_slider').text(count+'/4');
	$('.previous'+img_class).removeClass('previous'+img_class);
}

.main_image_slide_container{
    position: fixed;
    left: 50px;
    right:50px;
		width: 500px;
    height: 500px;
	}

	.image_slide_container_all_text_wrapper{
		width: 100%;
		height: auto;
		overflow: overlay;
	}

	.image_slider_title{
		float: left;
	}

	.image_slider_counter{
		float: right;
	}

	.main_image_slide_container .image_slider_counter{
		display: none;
	}

	.image_slide_container_all_text_wrapper .image_slider_counter{
		display: block;
	}

	.slider_images_wrapper_window{
		width: 100%;
		height: auto;
		position: relative;
	}

	.image_slider_controls{
		position: absolute;
		z-index: 10;
		width: 50%;
		height: 100%;
	}

	.left{
		left: 0;
		cursor: default;
	}

	.left:hover{
		cursor: url(../../data/cursor_left.png) 40 30, move;
	}

	.right{
		right: 0;
		cursor: default;
	}

	.right:hover{
		cursor: url(../../data/cursor_right.png) 40 30, move;
	}

	.slider_images_container{
		width: 100%;
		height: auto;
	}

	.slider_images_container img{
        position: relative;
		width: 100%;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main_image_slide_container">
					<div class="image_slide_container_all_text_wrapper">
						<div class="image_slider_title big_text font">Gravient Vertical</div>
						<div class="image_slider_counter big_text font vertical_img_slider">1/4</div>
					</div>
					<div class="slider_images_wrapper_window">
						<div class="image_slider_controls left" data-id="vertical_img"></div>
						<div class="image_slider_controls right" data-id="vertical_img"></div>
						<div class="slider_images_container">
							<img class="vertical_img invisable" data-num="1" src="https://www.geeky-gadgets.com/wp-content/uploads/2010/06/google-mac-linux1.jpg">
							<img class="vertical_img invisable" data-num="2" src="https://images.techhive.com/images/idge/imported/article/ctw/2012/10/19/samsung_chromebook_338-100391696-orig.jpg">
						</div>
					</div>
					<div class="image_slider_counter big_text font vertical_img_slider">1/4</div> <!--mobile counter -->
				</div>

所以我目前的问题是图像没有动画到左边。我不知道为什么..我很确定我的动画语法是正确的。我从jquery网站上复制粘贴它。

欢迎所有建议和提示。 如果有什么不清楚的地方请告诉我，我可以澄清一下！

Answer 1

您错过了invisable css。这是工作示例。

jsfiddle