Bootstrap轮播一次多个帧
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Bootstrap轮播一次多个帧相关的知识，希望对你有一定的参考价值。
这是我试图用Bootstrap 3旋转木马实现的效果
它不是一次只显示一帧，而是一起显示N帧。然后当您滑动（或自动滑动时），它会像幻灯片那样移动幻灯片组。
这可以用bootstrap 3的旋转木马完成吗？我希望我不必去寻找另一个jQuery插件......
答案
这可以用bootstrap 3的旋转木马完成吗？我希望我不必去寻找另一个jQuery插件
截至2013-12-08，答案是否定的。使用Bootstrap 3的通用轮播插件无法实现您所寻找的效果。但是，这是一个简单的jQuery插件，似乎完全符合你想要的http://sorgalla.com/jcarousel/
另一答案
我有同样的问题，这里描述的解决方案运作良好。但我想支持窗口大小（和布局）更改。结果是一个小型库，可以解决所有计算问题。在这里查看：https://github.com/SocialbitGmbH/BootstrapCarouselPageMerger
为了使脚本工作，你必须将一个新的<div>包装器与类.item-content直接添加到你的.item <div>中。例：
<div class="carousel slide multiple" id="very-cool-carousel" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="item-content">
First page
</div>
</div>
<div class="item active">
<div class="item-content">
Second page
</div>
</div>
</div>
</div>
该库的用法：
socialbitBootstrapCarouselPageMerger.run('div.carousel');
要更改设置：
socialbitBootstrapCarouselPageMerger.settings.spaceCalculationFactor = 0.82;
例：
如您所见，当您调整窗口大小时，轮播会更新以显示更多控件。检查watchWindowSizeTimeout设置以控制对窗口大小更改作出反应的超时。
另一答案
<!--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/&am以上是关于Bootstrap轮播一次多个帧的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap 多个项目轮播（一次显示几个轮播项目）[重复]