我想修改bootstrap 3的轮播以一次显示几张幻灯片。我知道我可以将多个缩略图放在一张幻灯片中(div .item),但问题是旋转木马会滑过它们同时移动到下一组,而我想要逐步浏览它们一个接一个。
我在这里找到了一个我想要的例子:http://www.bootply.com/117282唯一的问题是我需要5个或6个幻灯片,而不是4个。我花了几个小时试图修改这个按照要求工作,但我显然没有充分了解它是如何工作的。
我的jquery / javascript理解非常简单,但我的CSS非常不错。有人可以告诉我如何修改它以同时显示5/6幻灯片吗?我非常感谢你的帮助。
谢谢, 夏尔马
答案 0 :(得分:17)
如果你只想覆盖这个小提琴那么:
1 :
在JS中:通过for (var i=0;i<2;i++) {
for (var i=0;i<4;i++) {
2 :
在HTML中:col-lg-3
更改col-lg-2
(所以4个项目)(所以6个项目)
bootply :http://www.bootply.com/123662
答案 1 :(得分:0)
<!--css code-->
.carousel-showsixmoveone .carousel-control {
width: 4%;
background-image: none;
}
.carousel-showsixmoveone .carousel-control.left {
margin-left: 15px;
}
.carousel-showsixmoveone .carousel-control.right {
margin-right: 15px;
}
.carousel-showsixmoveone .cloneditem-1,
.carousel-showsixmoveone .cloneditem-2,
.carousel-showsixmoveone .cloneditem-3,
.carousel-showsixmoveone .cloneditem-4,
.carousel-showsixmoveone .cloneditem-5 {
display: none;
}
@media all and (min-width: 768px) {
.carousel-showsixmoveone .carousel-inner > .active.left,
.carousel-showsixmoveone .carousel-inner > .prev {
left: -33.333%;
}
.carousel-showsixmoveone .carousel-inner > .active.right,
.carousel-showsixmoveone .carousel-inner > .next {
left: 33.333%;
}
.carousel-showsixmoveone .carousel-inner > .left,
.carousel-showsixmoveone .carousel-inner > .prev.right,
.carousel-showsixmoveone .carousel-inner > .active {
left: 0;
}
.carousel-showsixmoveone .carousel-inner .cloneditem-1,
.carousel-showsixmoveone .carousel-inner .cloneditem-2 {
display: block;
}
}
@media all and (min-width: 768px) and (transform-3d),
all and (min-width: 768px) and (-webkit-transform-3d) {
.carousel-showsixmoveone .carousel-inner > .item.active.right,
.carousel-showsixmoveone .carousel-inner > .item.next {
-webkit-transform: translate3d(33.333%, 0, 0);
transform: translate3d(33.333%, 0, 0);
left: 0;
}
.carousel-showsixmoveone .carousel-inner > .item.active.left,
.carousel-showsixmoveone .carousel-inner > .item.prev {
-webkit-transform: translate3d(-33.333%, 0, 0);
transform: translate3d(-33.333%, 0, 0);
left: 0;
}
.carousel-showsixmoveone .carousel-inner > .item.left,
.carousel-showsixmoveone .carousel-inner > .item.prev.right,
.carousel-showsixmoveone .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
@media all and (min-width: 992px) {
.carousel-showsixmoveone .carousel-inner > .active.left,
.carousel-showsixmoveone .carousel-inner > .prev {
left: -16.666%;
}
.carousel-showsixmoveone .carousel-inner > .active.right,
.carousel-showsixmoveone .carousel-inner > .next {
left: 16.666%;
}
.carousel-showsixmoveone .carousel-inner > .left,
.carousel-showsixmoveone .carousel-inner > .prev.right,
.carousel-showsixmoveone .carousel-inner > .active {
left: 0;
}
.carousel-showsixmoveone .carousel-inner .cloneditem-3,
.carousel-showsixmoveone .carousel-inner .cloneditem-4,
.carousel-showsixmoveone .carousel-inner .cloneditem-5 {
display: block;
}
}
@media all and (min-width: 992px) and (transform-3d),
all and (min-width: 992px) and (-webkit-transform-3d) {
.carousel-showsixmoveone .carousel-inner > .item.active.right,
.carousel-showsixmoveone .carousel-inner > .item.next {
-webkit-transform: translate3d(16.666%, 0, 0);
transform: translate3d(16.666%, 0, 0);
left: 0;
}
.carousel-showsixmoveone .carousel-inner > .item.active.left,
.carousel-showsixmoveone .carousel-inner > .item.prev {
-webkit-transform: translate3d(-16.666%, 0, 0);
transform: translate3d(-16.666%, 0, 0);
left: 0;
}
.carousel-showsixmoveone .carousel-inner > .item.left,
.carousel-showsixmoveone .carousel-inner > .item.prev.right,
.carousel-showsixmoveone .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
<!-- begin snippet: js hide: false console: true -->
<!--html-->
<div class="row ">
<div class="col-md-12">
<div class="carousel carousel-showsixmoveone slide" id="chocolatelist" data-interval="30000">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12 col-sm-4 col-md-2">
<a href="#">
<img src="http://placehold.it/500/0054A6/fff/&text=1" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
<a href="#">
<img src="http://placehold.it/500/002d5a/fff/&text=2" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
<a href="#">
<img src="http://placehold.it/500/d6d6d6/333&text=3" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
<a href="#">
<img src="http://placehold.it/500/002040/eeeeee&text=4" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
<a href="#">
<img src="http://placehold.it/500/0054A6/fff/&text=5" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
<a href="#">
<img src="http://placehold.it/500/002d5a/fff/&text=6" class="img-responsive">
</a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-2">
<a href="#">
<img src="http://placehold.it/500/002d5a/fff/&text=2" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
<a href="#">
<img src="http://placehold.it/500/d6d6d6/333&text=3" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
<a href="#">
<img src="http://placehold.it/500/002040/eeeeee&text=4" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
<a href="#">
<img src="http://placehold.it/500/0054A6/fff/&text=5" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
<a href="#">
<img src="http://placehold.it/500/002d5a/fff/&text=6" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
<a href="#">
<img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive">
</a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-2">
<a href="#">
<img src="http://placehold.it/500/d6d6d6/333&text=3" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
<a href="#">
<img src="http://placehold.it/500/002040/eeeeee&text=4" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
<a href="#">
<img src="http://placehold.it/500/0054A6/fff/&text=5" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
<a href="#">
<img src="http://placehold.it/500/002d5a/fff/&text=6" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
<a href="#">
<img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
<a href="#">
<img src="http://placehold.it/500/40a1ff/002040&text=8" class="img-responsive">
</a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-2">
<a href="#">
<img src="http://placehold.it/500/002040/eeeeee&text=4" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
<a href="#">
<img src="http://placehold.it/500/0054A6/fff/&text=5" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
<a href="#">
<img src="http://placehold.it/500/002d5a/fff/&text=6" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
<a href="#">
<img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
<a href="#">
<img src="http://placehold.it/500/40a1ff/002040&text=8" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
<a href="#">
<img src="http://placehold.it/500/0054A6/fff/&text=1" class="img-responsive">
</a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-2">
<a href="#">
<img src="http://placehold.it/500/0054A6/fff/&text=5" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
<a href="#">
<img src="http://placehold.it/500/002d5a/fff/&text=6" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
<a href="#">
<img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
<a href="#">
<img src="http://placehold.it/500/40a1ff/002040&text=8" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
<a href="#">
<img src="http://placehold.it/500/0054A6/fff/&text=1" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
<a href="#">
<img src="http://placehold.it/500/002d5a/fff/&text=2" class="img-responsive">
</a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-2">
<a href="#">
<img src="http://placehold.it/500/002d5a/fff/&text=6" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
<a href="#">
<img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
<a href="#">
<img src="http://placehold.it/500/40a1ff/002040&text=8" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
<a href="#">
<img src="http://placehold.it/500/0054A6/fff/&text=1" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
<a href="#">
<img src="http://placehold.it/500/002d5a/fff/&text=2" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
<a href="#">
<img src="http://placehold.it/500/d6d6d6/333&text=3" class="img-responsive">
</a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-2">
<a href="#">
<img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
<a href="#">
<img src="http://placehold.it/500/40a1ff/002040&text=8" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
<a href="#">
<img src="http://placehold.it/500/0054A6/fff/&text=1" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
<a href="#">
<img src="http://placehold.it/500/002d5a/fff/&text=2" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
<a href="#">
<img src="http://placehold.it/500/d6d6d6/333&text=3" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
<a href="#">
<img src="http://placehold.it/500/002040/eeeeee&text=4" class="img-responsive">
</a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-2">
<a href="#">
<img src="http://placehold.it/500/40a1ff/002040&text=8" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
<a href="#">
<img src="http://placehold.it/500/0054A6/fff/&text=1" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
<a href="#">
<img src="http://placehold.it/500/002d5a/fff/&text=2" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
<a href="#">
<img src="http://placehold.it/500/d6d6d6/333&text=3" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
<a href="#">
<img src="http://placehold.it/500/002040/eeeeee&text=4" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
<a href="#">
<img src="http://placehold.it/500/0054A6/fff/&text=5" class="img-responsive">
</a>
</div>
</div>
</div>
<a class="left carousel-control" href="#chocolatelist" data-slide="prev"><i class="glyphicon glyphicon-chevron-left "></i></a>
<a class="right carousel-control" href="#chocolatelist" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
粘贴此代码,您将获得一些线索。image link of carousel slide