custom carousel
Здравствуйте, подскажите пожалуйста, почему у меня 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()
});
|
carousel с адаптацией под окно просмотра
s24344,
для медитации ... <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.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;
position: relative;
}
ul.carousel {
padding: 20px 0 15px 0;
margin: 0;
list-style-type: none;
background-color: #fff;
/* width: 852px; */
left: 0;
position: relative;
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;
opacity: .2;
}
div.controls__prev > a {
width: 22px;
height: 45px;
background: url(../images/prev.png) no-repeat;
display: block;
position: absolute;
top: 50%;
left: 50%;
}
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%;
right: 50%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="carousel-wrap">
<ul class="carousel clearfix">
<li class="carousel__title">
<div class="myslide">
<img class="carousel__image" src="http://www.sadalisa.ru/wp-content/uploads/2010/10/05157cad.jpg" alt="">
<a href="#" class="carousel__link">Комнатные цветы1</a>
</div>
</li>
<li class="carousel__title">
<div class="myslide">
<img class="carousel__image" src="http://www.sadalisa.ru/wp-content/uploads/2010/10/05157cad.jpg" alt="">
<a href="#" class="carousel__link">Свадебные цветы2</a>
</div>
</li>
<li class="carousel__title">
<div class="myslide">
<img class="carousel__image" src="http://www.sadalisa.ru/wp-content/uploads/2010/10/05157cad.jpg" alt="">
<a href="#" class="carousel__link">Комнатные цветы3</a>
</div>
</li>
<li class="carousel__title">
<div class="myslide">
<img class="carousel__image" src="http://www.sadalisa.ru/wp-content/uploads/2010/10/05157cad.jpg" alt="">
<a href="#" class="carousel__link">Свадебные цветы4</a>
</div>
</li>
<li class="carousel__title">
<div class="myslide">
<img class="carousel__image" src="http://www.sadalisa.ru/wp-content/uploads/2010/10/05157cad.jpg" alt="">
<a href="#" class="carousel__link">Комнатные цветы5</a>
</div>
</li>
<li class="carousel__title">
<div class="myslide">
<img class="carousel__image" src="http://www.sadalisa.ru/wp-content/uploads/2010/10/05157cad.jpg" alt="">
<a href="#" class="carousel__link">Свадебные цветы6</a>
</div>
</li>
<li class="carousel__title">
<div class="myslide">
<img class="carousel__image" src="http://www.sadalisa.ru/wp-content/uploads/2010/10/05157cad.jpg" alt="">
<a href="#" class="carousel__link">Комнатные цветы7</a>
</div>
</li>
<li class="carousel__title">
<div class="myslide">
<img class="carousel__image" src="http://www.sadalisa.ru/wp-content/uploads/2010/10/05157cad.jpg" alt="">
<a href="#" class="carousel__link">Свадебные цветы8</a>
</div>
</li>
</ul>
<div class="controls">
<div class="controls__prev"><a href="#">prev</a></div>
<div class="controls__next"><a href="#">next</a></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function() {
var e = $(".carousel"),
c = $("li", e).get(),
d = c.length,
g = $("div.carousel-wrap"),
h = $(".controls__next, .controls__prev");
h.on("click", function(a) {
a.preventDefault();
a = e.position().left;
if (this.classList.contains("controls__next"))
for (var b = 0; b < d; b++) {
var f = $(c[b]).position().left;
if (f > -a) {
a = f;
break
}
} else
for (b = d - 1; - 1 < b; b--)
if (f = $(c[b]).position().left, f < -a) {
a = f;
break
}
h.css({
opacity: 1
});
b > 0 || $(this).css({
opacity: .2
});
b = $(c[d - 1]).position().left + $(c[d - 1]).width() - g.width();
a > b && (a = b, $(this).css({
opacity: .2
}));
e.stop().animate({
left: -a + "px"
}, 1E3)
});
var k;
$(window).on("resize", function() {
window.clearTimeout(k);
k = window.setTimeout(function() {
var a = -e.position().left + g.width() - $(c[d - 1]).position().left - $(c[d - 1]).width();
0 < a && e.stop().animate({
left: "+=" + a + "px"
}, 300)
}, 200)
})
});
</script>
</body>
</html>
|
Спасибо
|
| Часовой пояс GMT +3, время: 11:57. |