如何在 Bootstrap 4 中实现多项目轮播？文档提到了多个轮播，但没有提到包含多个项目的轮播。
【问题讨论】：
标签： html css twitter-bootstrap bootstrap-4 bootstrap-5
引导程序 5 - 2021 年更新
与早期版本一样，最好的方法是将多张幻灯片放在单个 carousel-item 中。这可以使用网格类来完成...
<div class="carousel-item">
<div class="row">
<div class="col">slide 1</div>
<div class="col">slide 2</div>
<div class="col">slide 3</div>
<div class="col">slide 4</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col">slide 5</div>
<div class="col">slide 6</div>
<div class="col">slide 7</div>
<div class="col">slide 8</div>
</div>
</div>
上面的代码将一次推进 4 张幻灯片。如果您希望轮播一次只前进一张幻灯片，see this question。
引导程序 4 - 2019 年更新
我已经使用 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);
多个项目：
http://codeply.com/go/WEbiqQvGhy
多个项目，一次移动一个：
http://codeply.com/go/FrzoIEKCdH（Bootstrap 4 alpha）
http://codeply.com/go/3EQkUOhhZz（Bootstrap 4.0.0）
响应式 3 个大型项目（一次 1 个），1 个小型项目：
http://codeply.com/go/s3I9ivCBYH
【讨论】：
我在 html 中使用了这种结构，以使轮播具有响应性，并且可以根据您需要的每张幻灯片的项目数轻松编辑。您可以在下面的链接中找到完整的代码。它需要 bootstrap 4.0.0、jquery 和 bootstrap js。
<div class="carousel-item col-md-6 active">
<img class="img-fluid mx-auto d-block" src="//placehold.it/400x300?text=1" alt="slide 1">
</div>
【讨论】：
2021 年 Bootstrap 5 更新
受 Zims 方法的启发，我更新了样式表以使用 Bootstrap 5。
多个项目，一次移动一个：
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 100000
})
$('.carousel .carousel-item').each(function(){
var minPerSlide = 4;
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<minPerSlide;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});@media (max-width: 768px) {
.carousel-inner .carousel-item > div {
display: none;
}
.carousel-inner .carousel-item > div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-start,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* display 4 */
@media (min-width: 768px) {
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next,
.carousel-item-next:not(.carousel-item-start)
{
transform: translateX(25%) !important;
}
.carousel-inner .carousel-item-left.active, .carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start, .carousel-item-prev:not(.carousel-item-end)
{
transform: translateX(-25%) !important;
}
.carousel-item-next.carousel-item-start {
transform: translateX(0) !important;
}
.carousel-inner .carousel-item-prev,
.carousel-item-prev:not(.carousel-item-end)
{
transform: translateX(-25%) !important;
}
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
transform: translateX(0) !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<div id="myCarousel" class="carousel slide container" data-bs-ride="carousel">
<div class="carousel-inner w-100">
<div class="carousel-item active">
<div class="col-md-3">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=1">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=2">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=3">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=4">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=5">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=6">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=7">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=8">
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>【讨论】：
我正在使用 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>
这个多轮播的六张图片每次都以散装形式滑动。随意问我:)
【讨论】：
您可以一次显示一个轮播项目，但可以用多个元素填充它。比如：
.item
.col-xs-4
{content}
.col-xs-4
{content}
.col-xs-4
{content}
但您可能希望一次推进一个。开箱即用的引导程序不会发生这种情况。在实施了许多轮播之后，我建议在 Bootstrap 不符合要求时寻找另一个轮播库。 Slick.js 是我的许多轮播配置选项的首选库。它是一个相当苗条的〜5k min'd和gzipped。
如果你对使用 bootstrap 很执着，这里有一个脚本可以提供单项进阶、多项：http://codepen.io/MarkitDigital/pen/ZpEByz
【讨论】：