一次引导转盘多个帧
这是我试图用Bootstrap 3旋转木马实现的效果
而不是一次只显示一个帧，它显示N个帧并排。 然后，当您滑动（或自动滑动时）时，会像这样移动幻灯片组。
这可以通过 bootstrap 3的旋转木马来完成吗？ 我希望我不会去寻找另一个jQuery插件…
这可以通过bootstrap 3的旋转木马来完成吗？ 我希望我不会去寻找另一个jQuery插件
截至2013年12月8日，答案是否定的。 你正在寻找的效果是不可能的使用Bootstrap 3的通用旋转木马插件。 不过，这里有一个简单的jQuery插件，它可以完成你想要的东西http://sorgalla.com/jcarousel/
2017年更新
Bootstrap 3
以下是Bootply上的一个3.x示例： http ：//bootply.com/89193
您需要将整行图像放入该项目中。 这里是另一个版本，不会以较小的屏幕宽度堆叠图像： http : //bootply.com/92514
编辑另一种方法来一次提前一张幻灯片 ：
使用jQuery克隆下一个项目..
$('.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)); } }); 然后CSS来相应地定位…
在3.3.1之前
.carousel-inner .active.left { left: -33%; } .carousel-inner .next { left: 33%; }
3.3.1之后
.carousel-inner .item.left.active { transform: translateX(-33%); } .carousel-inner .item.right.active { transform: translateX(33%); } .carousel-inner .item.next { transform: translateX(33%) } .carousel-inner .item.prev { transform: translateX(-33%) } .carousel-inner .item.right, .carousel-inner .item.left { transform: translateX(0); }
这将显示3，但只能一次滑动一个 ：
Bootstrap 3.x演示
Bootstrap 4
旋转木马在4.x中已经改变，并且animation转换可以像这样被覆盖…
.carousel-inner .carousel-item-right.active, .carousel-inner .carousel-item-next { transform: translateX(33.33%); } .carousel-inner .carousel-item-left.active, .carousel-inner .carousel-item-prev { transform: translateX(-33.33%) } .carousel-inner .carousel-item-right, .carousel-inner .carousel-item-left{ transform: translateX(0); }
Bootstrap 4演示
最后，另一种select是在较小的屏幕上显示和前进1张幻灯片的响应式轮播。 不是像前面的例子那样克隆幻灯片，而是调整CSS，并使用jQuery来移动额外的幻灯片以允许连续循环（环绕）：
Bootstrap 4演示2
@media (min-width: 768px) { /* show 3 items */ .carousel-inner .active, .carousel-inner .active + .carousel-item, .carousel-inner .active + .carousel-item + .carousel-item { display: block; } .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left), .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item, .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item { transition: none; } .carousel-inner .carousel-item-next, .carousel-inner .carousel-item-prev { position: relative; transform: translate3d(0, 0, 0); } .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item { position: absolute; top: 0; right: -33.3333%; z-index: -1; display: block; visibility: visible; } /* left or forward direction */ .active.carousel-item-left + .carousel-item-next.carousel-item-left, .carousel-item-next.carousel-item-left + .carousel-item, .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item, .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item { position: relative; transform: translate3d(-100%, 0, 0); visibility: visible; } /* farthest right hidden item must be abso position for animations */ .carousel-inner .carousel-item-prev.carousel-item-right { position: absolute; top: 0; left: 0; z-index: -1; display: block; visibility: visible; } /* right or prev direction */ .active.carousel-item-right + .carousel-item-prev.carousel-item-right, .carousel-item-prev.carousel-item-right + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item { position: relative; transform: translate3d(100%, 0, 0); visibility: visible; display: block; visibility: visible; } }
这是一个工作的twitter引导3。
这里是javascript ：
$('#myCarousel').carousel({ interval: 10000 }) $('.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)); } });
和CSS ：
.carousel-inner .active.left { left: -33%; } .carousel-inner .active.right { left: 33%; } .carousel-inner .next { left: 33% } .carousel-inner .prev { left: -33% } .carousel-control.left { background-image: none; } .carousel-control.right { background-image: none; } .carousel-inner .item { background: white; }
你可以看到它在这个Jsfiddle的行动
我添加这个答案的原因是因为其他的不完全工作。 我发现里面有2个bug，其中一个是左箭头产生了一个奇怪的效果，另一个是关于文本在某些情况下变粗的问题，可以通过设置背景颜色来解决这个问题，影响。
以上所有的解决scheme都是黑客和马车。 别尝试。 使用其他库。 最好的，我发现 – http://sachinchoolur.github.io/lightslider伟大的引导工程，不添加垃圾html，高度可configuration，响应，移动友好等;…
$('.multi-item-carousel').lightSlider({ item: 4, pager: false, autoWidth: false, slideMargin: 0 });
这是为我工作。 非常简单的jQuery和CSS，使响应旋转木马独立于同一页上的传送带。 高度可定制的，但基本上与白色空间nowrap包含一串内联块元素，并把最后一个开始移回或第一个到最后向前移动。 谢谢insertAfter ！
$('.carosel-control-right').click(function() { $(this).blur(); $(this).parent().find('.carosel-item').first().insertAfter($(this).parent().find('.carosel-item').last()); }); $('.carosel-control-left').click(function() { $(this).blur(); $(this).parent().find('.carosel-item').last().insertBefore($(this).parent().find('.carosel-item').first()); });
@media (max-width: 300px) { .carosel-item { width: 100%; } } @media (min-width: 300px) { .carosel-item { width: 50%; } } @media (min-width: 500px) { .carosel-item { width: 33.333%; } } @media (min-width: 768px) { .carosel-item { width: 25%; } } .carosel { position: relative; background-color: #000; } .carosel-inner { white-space: nowrap; overflow: hidden; font-size: 0; } .carosel-item { display: inline-block; } .carosel-control { position: absolute; top: 50%; padding: 15px; box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.5); transform: translateY(-50%); border-radius: 50%; color: rgba(0, 0, 0, 0.5); font-size: 30px; display: inline-block; } .carosel-control-left { left: 15px; } .carosel-control-right { right: 15px; } .carosel-control:active, .carosel-control:hover { text-decoration: none; color: rgba(0, 0, 0, 0.8); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="carosel" id="carosel1"> <a class="carosel-control carosel-control-left glyphicon glyphicon-chevron-left" href="#"></a> <div class="carosel-inner"> <img class="carosel-item" src="http://placehold.it/500/bbbbbb/fff&text=1" /> <img class="carosel-item" src="http://placehold.it/500/CCCCCC&text=2" /> <img class="carosel-item" src="http://placehold.it/500/eeeeee&text=3" /> <img class="carosel-item" src="http://placehold.it/500/f4f4f4&text=4" /> <img class="carosel-item" src="http://placehold.it/500/fcfcfc/333&text=5" /> <img class="carosel-item" src="http://placehold.it/500/f477f4/fff&text=6" /> </div> <a class="carosel-control carosel-control-right glyphicon glyphicon-chevron-right" href="#"></a> </div> <div class="carosel" id="carosel2"> <a class="carosel-control carosel-control-left glyphicon glyphicon-chevron-left" href="#"></a> <div class="carosel-inner"> <img class="carosel-item" src="http://placehold.it/500/bbbbbb/fff&text=1" /> <img class="carosel-item" src="http://placehold.it/500/CCCCCC&text=2" /> <img class="carosel-item" src="http://placehold.it/500/eeeeee&text=3" /> <img class="carosel-item" src="http://placehold.it/500/f4f4f4&text=4" /> <img class="carosel-item" src="http://placehold.it/500/fcfcfc/333&text=5" /> <img class="carosel-item" src="http://placehold.it/500/f477f4/fff&text=6" /> </div> <a class="carosel-control carosel-control-right glyphicon glyphicon-chevron-right" href="#"></a> </div>
最stream行的答案是正确的，但我认为代码是无用的复杂。 使用相同的CSS，这个jQuery代码更容易理解我相信：
$('#myCarousel').carousel({ interval: 10000 }) $('.carousel .item').each(function() { var item = $(this); item.siblings().each(function(index) { if (index < 4) { $(this).children(':first-child').clone().appendTo(item); } }); });
试试这个…..它在我的工作…. 代码：
<div class="container"> <br> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="span4" style="padding-left: 18px;"> <img src="http://placehold.it/290x180" class="img-thumbnail"> <img src="http://placehold.it/290x180" class="img-thumbnail"> <img src="http://placehold.it/290x180" class="img-thumbnail"> </div> </div> <div class="item"> <div class="span4" style="padding-left: 18px;"> <img src="http://placehold.it/290x180" class="img-thumbnail"> <img src="http://placehold.it/290x180" class="img-thumbnail"> <img src="http://placehold.it/290x180" class="img-thumbnail"> </div> </div> </div> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>
$('#carousel-example-generic').on('slid.bs.carousel', function () { $(".item.active:nth-child(" + ($(".carousel-inner .item").length -1) + ") + .item").insertBefore($(".item:first-child")); $(".item.active:last-child").insertBefore($(".item:first-child")); });
.item.active, .item.active + .item, .item.active + .item + .item { width: 33.3%; display: block; float:left; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="max-width:800px;"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img data-src="holder.js/300x200?text=1"> </div> <div class="item"> <img data-src="holder.js/300x200?text=2"> </div> <div class="item"> <img data-src="holder.js/300x200?text=3"> </div> <div class="item"> <img data-src="holder.js/300x200?text=4"> </div> <div class="item"> <img data-src="holder.js/300x200?text=5"> </div> <div class="item"> <img data-src="holder.js/300x200?text=6"> </div> <div class="item"> <img data-src="holder.js/300x200?text=7"> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.1/holder.min.js"></script>
我遇到了同样的问题，这里描述的解决scheme运行良好。 但我想支持窗口大小（和布局）的变化。 结果是一个小型图书馆，解决所有的计算。 看看这里： https : //github.com/SocialbitGmbH/BootstrapCarouselPageMerger
为了使脚本正常工作，您必须直接在.item <div>添加一个新的带有.item-content类的<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设置来控制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/&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>
Try this code <div id="recommended-item-carousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <div class="col-sm-3"> <div class="product-image-wrapper"> <div class="single-products"> <div class="productinfo text-center"> <img src="img/home/recommend1.jpg" alt="" /> <h2>$56</h2> <p> Easy Polo Black Edition </p> <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a> </div> </div> </div> </div> <div class="col-sm-3"> <div class="product-image-wrapper"> <div class="single-products"> <div class="productinfo text-center"> <img src="img/home/recommend2.jpg" alt="" /> <h2>$56</h2> <p> Easy Polo Black Edition </p> <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a> </div> </div> </div> </div> <div class="col-sm-3"> <div class="product-image-wrapper"> <div class="single-products"> <div class="productinfo text-center"> <img src="img/home/recommend3.jpg" alt="" /> <h2>$56</h2> <p> Easy Polo Black Edition </p> <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a> </div> </div> </div> </div> </div> <div class="item"> <div class="col-sm-3"> <div class="product-image-wrapper"> <div class="single-products"> <div class="productinfo text-center"> <img src="img/home/recommend1.jpg" alt="" /> <h2>$56</h2> <p> Easy Polo Black Edition </p> <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a> </div> </div> </div> </div> <div class="col-sm-3"> <div class="product-image-wrapper"> <div class="single-products"> <div class="productinfo text-center"> <img src="img/home/recommend2.jpg" alt="" /> <h2>$56</h2> <p> Easy Polo Black Edition </p> <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a> </div> </div> </div> </div> <div class="col-sm-3"> <div class="product-image-wrapper"> <div class="single-products"> <div class="productinfo text-center"> <img src="img/home/recommend3.jpg" alt="" /> <h2>$56</h2> <p> Easy Polo Black Edition </p> <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a> </div> </div> </div> </div> </div> </div> <a class="left recommended-item-control" href="#recommended-item-carousel" data-slide="prev"> <i class="fa fa-angle-left"></i> </a> <a class="right recommended-item-control" href="#recommended-item-carousel" data-slide="next"> <i class="fa fa-angle-right"></i> </a> </div>
我已经看到你的问题和答案，并做出了一个新的响应和灵活的多项目旋转木马Gist。 你可以在这里看到它：
https://gist.github.com/IVIR3zaM/d143a361e61459146ae7c68ce86b066e
您可以在ol标签中添加多个li，该标签的属性类的值为“carousel-indicators”，data-slide-to的顺序值为0到6或0到9。
比你只需要复制和粘贴具有值为“item”的class属性的div。
这对我有用。
<div data-ride="carousel" class="carousel slide" id="myCarousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li class="" data-slide-to="0" data-target="#myCarousel"></li> <li data-slide-to="1" data-target="#myCarousel" class=""></li> <li data-slide-to="2" data-target="#myCarousel" class="active"></li> <li data-slide-to="3" data-target="#myCarousel" class=""></li> <li data-slide-to="4" data-target="#myCarousel" class=""></li> <li data-slide-to="5" data-target="#myCarousel" class=""></li> <li data-slide-to="6" data-target="#myCarousel" class=""></li> </ol> <div role="listbox" class="carousel-inner"> <div class="item active"> <img alt="First slide" src="images/carousel/11.jpg" class="first-slide"> </div> <div class="item"> <img alt="Second slide" src="images/carousel/22.jpg" class="second-slide"> </div> <div class="item"> <img alt="Third slide" src="images/carousel/33.jpg" class="third-slide"> </div> <div class="item"> <img alt="Third slide" src="images/carousel/44.jpeg" class="fourth-slide"> </div> <div class="item"> <img alt="Third slide" src="images/carousel/55.jpg" class="third-slide"> </div> <div class="item"> <img alt="Third slide" src="images/carousel/66.jpg" class="third-slide"> </div> <div class="item"> <img alt="Third slide" src="images/carousel/77.jpg" class="third-slide"> </div> </div> <a data-slide="prev" role="button" href="#myCarousel" class="left carousel-control"> <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a data-slide="next" role="button" href="#myCarousel" class="right carousel-control"> <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div>
