[英]How to stop infinite loop in Carousel?
我为示例电子商务网站的产品滑动创建了一个轮播,它可以正常工作,但可以无限循环运行,但是我想在最后一个产品出现时停止该滑块。 我已经尝试过data-wrap="false"
但是它不起作用。 请帮我。 试图实现此站点上存在的产品滑块
jQuery查询
$('#myCarousel').carousel({
interval: 000
})
$('#myCarousel1').carousel({
interval: 000
})
$('#myCarousel2').carousel({
interval: 000
})
$('#myCarousel3').carousel({
interval: 000
})
$('#myCarousel4').carousel({
interval: 000
})
$('#myCarousel5').carousel({
interval: 000
})
$('#myCarousel6').carousel({
interval: 000
})
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
的HTML
<div class="carousel slide" id="myCarousel" data-ride="carousel" data-interval="000" data-pause="hover" data-wrap="false">
<div class="carousel-inner">
<div class="item active ">
<div class="col-xs-3"><a href="mobile/samsung/samsung.html"><img src="images/s8.png" class="img-responsive thumb"></a>
<h3>
Smartphones
</h3>
</div>
</div>
<div class="item">
<div class="col-xs-3"><a href="mobile/nokia/nokia.html"><img src="images/n9.jpg" class="img-responsive thumb"></a>
<h3>
Feature Phones
</h3>
</div>
</div>
<div class="item">
<div class="col-xs-3"><a href="mobile/nokia/nokia.html"><img src="images/n9.jpg" class="img-responsive thumb"></a>
<h3>
Screen Protectors
</h3>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
试试吧
$(document).ready(function() {
$('#myCarousel').carousel({
interval: 1000,
wrap: false
})
$('#myCarousel').on('slid.bs.carousel', function() {
//alert("slid");
});
$('#myCarousel').on('slid.bs.carousel', '', function() {
var $this = $(this);
$this.children('.carousel-control').show();
if($('.carousel-inner .item:first').hasClass('active')) {
$this.children('.left.carousel-control').hide();
} else if($('.carousel-inner .item:last').hasClass('active')) {
$this.children('.right.carousel-control').hide();
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.