Здравствуйте, подскажите пожалуйста, почему у меня carousel_ch.animate({ "left": -carousel_ch_width + "px"}, 1000) выполняется только один раз
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="wrap">
<div class="carousel-wrap">
<ul class="carousel clearfix">
<li class="carousel__title active">
<div class="myslide">
<img class="carousel__image" src="images/fl.jpg" alt="">
<a href="#" class="carousel__link">Комнатные цветы</a>
</div>
</li>
<li class="carousel__title active">
<div class="myslide">
<img class="carousel__image" src="images/fl2.jpg" alt="">
<a href="#" class="carousel__link">Свадебные цветы</a>
</div>
</li>
<li class="carousel__title active">
<div class="myslide">
<img class="carousel__image" src="images/fl.jpg" alt="">
<a href="#" class="carousel__link">Комнатные цветы</a>
</div>
</li>
<li class="carousel__title active">
<div class="myslide">
<img class="carousel__image" src="images/fl2.jpg" alt="">
<a href="#" class="carousel__link">Свадебные цветы</a>
</div>
</li>
<li class="carousel__title">
<div class="myslide">
<img class="carousel__image" src="images/fl.jpg" alt="">
<a href="#" class="carousel__link">Комнатные цветы</a>
</div>
</li>
<li class="carousel__title">
<div class="myslide">
<img class="carousel__image" src="images/fl2.jpg" alt="">
<a href="#" class="carousel__link">Свадебные цветы</a>
</div>
</li>
<li class="carousel__title">
<div class="myslide">
<img class="carousel__image" src="images/fl.jpg" alt="">
<a href="#" class="carousel__link">Комнатные цветы</a>
</div>
</li>
<li class="carousel__title">
<div class="myslide">
<img class="carousel__image" src="images/fl2.jpg" alt="">
<a href="#" class="carousel__link">Свадебные цветы</a>
</div>
</li>
</ul>
<div class="controls">
<div class="controls__prev"><a href="#"></a></div>
<div class="controls__next"><a href="#"></a></div>
</div>
</div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/main.js"></script>
</body>
</html>
.clearfix:before, .clearfix:after{
content: " ";
display: table;
}
.clearfix:after{
clear: both;
}
body {
background-color: #d6dbcb;
}
img {
border: none;
max-width: 100%;
display: block;
margin: auto;
}
.wrap {
max-width: 959px;
margin: auto;
position: relative;
}
div.carousel-wrap {
margin: 20px auto;
max-width: 852px;
overflow: hidden;
}
ul.carousel {
padding: 20px 0 15px 0;
margin: 0;
list-style-type: none;
background-color: #fff;
/* width: 852px; */
margin: 0 auto;
width: 10650px;
}
li.carousel__title {
float: left;
position: relative;
}
div.myslide {
width: 213px;
text-align: center;
}
a.carousel__link {
display: block;
color: #be1a2a;
}
div.controls__prev {
position: absolute;
top: 0;
left: 0px;
width: 54px;
background-color: #f0f2eb;
}
div.controls__prev > a {
width: 22px;
height: 45px;
background: url(../images/prev.png) no-repeat;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin: -22.5px 0 0 -11px;
}
div.controls__next {
position: absolute;
top: 0;
right: 0px;
width: 54px;
background-color: #f0f2eb;
}
div.controls__next > a {
width: 22px;
height: 45px;
background: url(../images/next.png) no-repeat;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin: -22.5px 0 0 -11px;
}
$(function() {
var init = function() {
forward();
}
var forward = function() {
$('.controls__next').on('click', function(e) {
e.preventDefault();
var carousel_ch = $('.carousel').children(); // все li
var carousel_ch_last = $('.carousel').children().last(); // все li
var carousel_first = $('.carousel').children().first();
var active_f = $('.active').first();
var active_l = $('.active').last();
var active_ln = $('.active').last().next();
var carousel_ch_width = $('.carousel').children().width();
console.log(carousel_ch_width);
if ( carousel_ch_last.hasClass('active') ) {
} else {
carousel_ch.animate({
"left": -carousel_ch_width + "px"
}, 1000)
active_f.removeClass('active');
active_ln.addClass('active');
}
})
}
init()
});