twitter-bootstrap 带有多个项目的 Bootstrap 轮播
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36242667/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap carousel with multiple items
提问by
I'm working on a project available on JSFiddle. As you can notice, there are 6 items displayed and I would like to make a carousel to display 3 items per slide. After researching this issue, I find this awesome project on Codepen. Each item of my project is represented by the following code:
我正在研究一个在JSFiddle上可用的项目。如您所见，显示了 6 个项目，我想制作一个轮播，每张幻灯片显示 3 个项目。在研究了这个问题之后，我在Codepen上发现了这个很棒的项目。我的项目的每一项都由以下代码表示：
<div class="wrapper">
<img src="https://photos-2.dropbox.com/t/2/AACS3GcxUnMu4DpsfC5pF-zF55I8WHf1blL4AvkQULu1Gw/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHsgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>while the item on Codepen is represented by this one:
而 Codepen 上的项目由这个表示：
<div class="item active">
<div class="col-xs-4">
<a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a>
</div>
</div>Whenever I try to remove the item's code in Codepen and place my item's code from JSFiddle, the slider stops working.
每当我尝试在 Codepen 中删除项目代码并从 JSFiddle 放置项目代码时，滑块就会停止工作。
Please let me know how to solve this problem.
请让我知道如何解决这个问题。
回答by Kalpesh Singh
Is this what you wanted? Please check fiddle, you will understand, why it wasn't working. You may have missed some libraries and CSS.
这是你想要的吗？请检查小提琴，你会明白，为什么它不起作用。您可能错过了一些库和 CSS。
$('#theCarousel').carousel({
interval: false
})
$('.multi-item-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));
}
});.multi-item-carousel{
.carousel-inner{
> .item{
transition: .6s ease-in-out all;
}
.active{
&.left{
left:-33%;
}
&.right{
left:33%;
}
}
.next{
left: 33%;
}
.prev{
left: -33%;
}
}
.carouse-control{
&.left, &.right{
background-image: none;
}
}
@media all and (transform-3d), (-webkit-transform-3d) {
&{
.carousel-inner {
> .item{
transition: .6s ease-in-out all;
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-perspective: none;
-webkit-transform: none!important;
transform: none!important;
}
}
}
}
}<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-md-8 col-md-offset-2">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4 wrapper">
<a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<a href="#1"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></a>
<div class="overlay">
<h5 class="header">A Movie in the Park: Kung Fu Panda</h5>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<a href="#1"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></a>
<h5 class="header">Batman Return</h5>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<a href="#1"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></a>
<h5 class="header">Deadpool</h5>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<a href="#1"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a>
</div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>回答by J. Titus
Read the carousel documentationand notice the format of each item (specifically the addition of .itemand .active).
阅读轮播文档并注意每个项目的格式（特别是.item和的添加.active）。
This wrapper around each image is making it so that 3 elements are displayed per row:
每个图像周围的这个包装器使得每行显示 3 个元素：
<div class="col-xs-4">
...
</div>
(in comparison, using .col-xs-12would indicate 1 image per displayed row, and .col-xs-6would indicate 2 images per displayed row)
（相比之下， using.col-xs-12表示每显示行 1 个图像，并.col-xs-6表示每个显示行 2 个图像）
