在bootstrap 3轮播中显示三个以上的项目 [英] display more than three items inside bootstrap 3 carousel
问题描述
我正在尝试按轮播显示产品列表,问题是它不能连续显示三个以上的项目.这是什么问题.这是我使用的代码:
I'm trying to display a list of product by carousel the problem is It can't display more than three items in a row .What's the problem . Here is the code I use :
<script>
$(document).ready(function () {
$('.fdi-Carousel .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
</script>
<style>
.carousel-inner.onebyone-carosel { margin: auto; width: 90%; }
.onebyone-carosel .active.left { left: -33.33%; }
.onebyone-carosel .active.right { left: 33.33%; }
.onebyone-carosel .next { left: 33.33%; }
.onebyone-carosel .prev { left: -33.33%; }
.carousel-control.left,.carousel-control.right {background-image:none;}
.item:not(.prev) {visibility: visible;}
.item.right:not(.prev) {visibility: hidden;}
.carousel-control {
width:5%
}
</style>
<div class="container">
<div class="row">
<div class="span12">
<div class="well">
<div id="myCarousel" class="carousel fdi-Carousel slide">
<!-- Carousel items -->
<div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0">
<div class="carousel-inner onebyone-carosel">
<div class="item active">
<div class="col-md-2">
<a href="#"><img src="Opitures/970767255465.jpg" class="img-responsive center-block"></a>
<div class="text-center">1</div>
</div>
</div>
<div class="item">
<div class="col-md-2">
<a href="#"><img src="Opitures/970767255465.jpg" class="img-responsive center-block"></a>
<div class="text-center">2</div>
</div>
</div>
<div class="item">
<div class="col-md-2">
<a href="#"><img src="Opitures/970767255465.jpg" class="img-responsive center-block"></a>
<div class="text-center">3</div>
</div>
</div>
<div class="item">
<div class="col-md-2">
<a href="#"><img src="Opitures/970767255465.jpg" class="img-responsive center-block"></a>
<div class="text-center">4</div>
</div>
</div>
<div class="item">
<div class="col-md-2">
<a href="#"><img src="Opitures/970767255465.jpg" class="img-responsive center-block"></a>
<div class="text-center">5</div>
</div>
</div>
<div class="item">
<div class="col-md-2">
<a href="#"><img src="Opitures/970767255465.jpg" class="img-responsive center-block"></a>
<div class="text-center">6</div>
</div>
</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>
<!--/carousel-inner-->
</div><!--/myCarousel-->
</div><!--/well-->
</div>
</div>
</div>
</div>
当我使用浏览器运行代码时,它会将幻灯片归类为带有"item"类的div,每个项目都包含三张幻灯片. 这是结果的图片:
When I run the code with browser , it group slides in a div with 'item' class and each item contains three slides . This is the picture of the result :
如何显示更多?
谢谢
推荐答案
看看-启动
将interval: false
更改为例如interval: 3000
,以每3秒自动更改一次幻灯片.
Change interval: false
to for example interval: 3000
to change slides automatically every 3 seconds.
3000是毫秒数(3秒)
3000 is number in miliseconds (3 seconds)
这是您要实现的目标吗?
Is this what you want to achieve?
这篇关于在bootstrap 3轮播中显示三个以上的项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!