Почему не работает анимация?

Question

[LoonTiG]

Всем здравствуйте
У меня есть задача написать слайдер как здесь в разделе видео
Слайдер я написал, но почему то не работает анимация, просто меняются слайды (мгновенно)

<div class="video-slider">
				<span id="sleft"></span>
				<ul>
					<li><iframe width="641" height="360" src="https://www.youtube.com/embed/mDfKVUP093A" frameborder="0" allowfullscreen></iframe><h3>Вечеринка 1</h3></li>
					<li><iframe width="641" height="360" src="https://www.youtube.com/embed/mDfKVUP093A" frameborder="0" allowfullscreen></iframe><h3>Вечеринка 2</h3></li>
					<li><iframe width="641" height="360" src="https://www.youtube.com/embed/mDfKVUP093A" frameborder="0" allowfullscreen></iframe><h3>Вечеринка 3</h3></li>
					<li><iframe width="641" height="360" src="https://www.youtube.com/embed/mDfKVUP093A" frameborder="0" allowfullscreen></iframe><h3>Вечеринка 4</h3></li>
				</ul>
				<span id="sright"></span>
			</div>

#sleft {
	display: block;
	position: absolute;
	top: calc(50% - 200px);
	cursor: pointer;
	left: 0;
	height: 360px;
	width: 44px;
	background: transparent url(../img/sleft.png) center center no-repeat
}
#sright {
	display: block;
	position: absolute;
	top: calc(50% - 200px);
	cursor: pointer;
	right: 0;
	height: 360px;
	width: 44px;
	background: transparent url(../img/sright.png) center center no-repeat
}
.video-slider {
	width: 760px;
	margin: 0 auto;
	padding-left: 4.5px;
	overflow: hidden;
	position: relative;
}
.video-slider > ul {
	width: 1000000px;
}
.video-slider > ul > li {
	float: left;
	margin-left: 59.6px;
}

$(document).on('click', "#sright",function(){
	var carusel = $(this).parents('.video-slider');
	right_carusel(carusel);
	return false;
});
$(document).on('click',"#sleft",function(){
	var carusel = $(this).parents('.video-slider');
	left_carusel(carusel);
	return false;
});
function left_carusel(carusel){
   var block_width = $(carusel).find('li').outerWidth();
   $(carusel).find("ul li").eq(-1).clone().prependTo($(carusel).find("ul"));
   $(carusel).find("ul").css({"left":"-"+block_width+"px"});
   $(carusel).find("ul li").eq(-1).remove();
   $(carusel).find("ul").animate({left: "0px"}, 300);
}
function right_carusel(carusel){
   var block_width = $(carusel).find('li').outerWidth();
   $(carusel).find("ul").animate({left: "-"+ block_width +"px"}, 300, function(){
	  $(carusel).find("ul li").eq(0).clone().appendTo($(carusel).find("ul"));
      $(carusel).find("ul li").eq(0).remove();
      $(carusel).find("ul").css({"left":"0px"});
   });
}

Как это исправить?