Html Bootstrap 4 Multiple Items Carousel（一次显示多个轮播项目）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40393210/
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 4 Multiple Items Carousel (several carousel items shown at once)
提问by SemanticUI
How do you implement a multiple items carousel in Bootstrap 4? The docs mention about multiple carousels but not a carousel with multiple items.
你如何在 Bootstrap 4 中实现多项目轮播？文档提到了多个轮播，但没有提到包含多个项目的轮播。
回答by Eric N
You can display one carousel item at a time, but fill it with multiple elements. Something like:
您可以一次显示一个轮播项目，但用多个元素填充它。就像是：
.item
.col-xs-4
{content}
.col-xs-4
{content}
.col-xs-4
{content}
But you may then be wishing you could advance them one at a time. That isn't going to happen with bootstrap right out of the box. After implementing many carousels, I'd recommend seeking another carousel library when Bootstrap's doesn't fit the bill. Slick.js is my go-to lib for lots of carousel config options. And its a fairly slim ~5k min'd and gzipped.
但是您可能会希望一次推进一项。开箱即用的引导程序不会发生这种情况。在实现了许多轮播之后，我建议在 Bootstrap 不符合要求时寻找另一个轮播库。Slick.js 是我的许多轮播配置选项的首选库。它是一个相当纤薄的 ~5k min'd 和 gzip 压缩包。
If you're hard-set on using bootstrap, here is a script that can provide single advance, multi-items: http://codepen.io/MarkitDigital/pen/ZpEByz
如果您很难使用引导程序，这里有一个脚本，可以提供单个提前、多项目：http: //codepen.io/MarkitDigital/pen/ZpEByz
回答by Zim
2019 Update for Bootstrap 4
2019 年 Bootstrap 4 更新
I have done this using the Bootstrap 4 grid with separate columns for each carousel item. If you want to advance only one item at a time, the script can be something like this that clones the slides into each carousel item..
我使用 Bootstrap 4 网格完成了此操作，每个轮播项目都有单独的列。如果您想一次只推进一个项目，脚本可以是这样的，它将幻灯片克隆到每个轮播项目中。
(function($) {
"use strict";
$('.carousel .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));
}
});
})(jQuery);
Mulitple items:
http://codeply.com/go/WEbiqQvGhy
多个项目：http:
//codeply.com/go/WEBiqQvGhy
Mulitple items, move one at a time:
http://codeply.com/go/FrzoIEKCdH(Bootstrap 4 alpha)
http://codeply.com/go/3EQkUOhhZz(Bootstrap 4.0.0)
多个项目，一次移动一个：
http: //codeply.com/go/FrzoIEKCdH（Bootstrap 4 alpha）
http://codeply.com/go/3EQkUOhhZz（Bootstrap 4.0.0）
Responsive 3 items on large (1 at a time), 1 item on smaller:
http://codeply.com/go/s3I9ivCBYH
响应大的 3 个项目（一次 1 个），较小的 1 个项目：http:
//codeply.com/go/s3I9ivCBYH
另见： https://stackoverflow.com/a/20008623/171456https://stackoverflow.com/a/20008623/171456
回答by Mohamed Abbas
i'm working on bootstrap 4. This code working for me
我正在使用 bootstrap 4。这段代码对我有用
<div class="container">
<div class="row">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-2 col-sm-6 col-12">
<a href="#"><img src="img/l1.jpg" alt=""/></a>
</div>
<div class="col-md-2 col-sm-6 col-12">
<a href="#"><img src="img/l2.jpg" alt=""/></a>
</div>
<div class="col-md-2 col-sm-6 col-12">
<a href="#"><img src="img/l3.jpg" alt=""/></a>
</div>
<div class="col-md-2 col-sm-6 col-12">
<a href="#"><img src="img/l4.jpg" alt=""/></a>
</div>
<div class="col-md-2 col-sm-6 col-12">
<a href="#"><img src="img/l5.jpg" alt=""/></a>
</div>
<div class="col-md-2 col-sm-6 col-12">
<a href="#"><img src="img/l6.jpg" alt=""/></a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-2 col-sm-6 col-12">
<a href="#"><img src="img/l1.jpg" alt=""/></a>
</div>
<div class="col-md-2 col-sm-6 col-12">
<a href="#"><img src="img/l2.jpg" alt=""/></a>
</div>
<div class="col-md-2 col-sm-6 col-12">
<a href="#"><img src="img/l3.jpg" alt=""/></a>
</div>
<div class="col-md-2 col-sm-6 col-12">
<a href="#"><img src="img/l4.jpg" alt=""/></a>
</div>
<div class="col-md-2 col-sm-6 col-12">
<a href="#"><img src="img/l5.jpg" alt=""/></a>
</div>
<div class="col-md-2 col-sm-6 col-12">
<a href="#"><img src="img/l6.jpg" alt=""/></a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
This multi carousel of six image slide every time as bulk. Free to ask me :)
这种六张图片幻灯片的多轮播每次都作为散装。有空问我:)
