Bootstrap 4多项旋转木马（一次显示几个旋转木马项目）

Question

如何在Bootstrap 4中实现多项旋转木马？文档提到了多个轮播而不是带有多个项目的轮播。

Answer 1

您可以一次显示一个轮播项目，但要用多个元素填充它。类似的东西：

.item
  .col-xs-4
     {content}
  .col-xs-4
     {content}
  .col-xs-4
     {content}

但是你可能希望你能一次推进一个。开箱即用就不会发生这种情况。在实施了许多旋转木马之后，我建议在Bootstrap不适合该帐单时寻找另一个旋转木马库。 Slick.js是我的许多carousel配置选项的首选库。它相当纤薄~5k分钟并且gzipped。

如果您在使用引导程序时遇到困难，可以使用以下脚本：[{3}}

Answer 2

2019年Bootstrap 4更新

我使用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

<小时/> 另请参阅：https://stackoverflow.com/a/20008623/171456

Answer 3

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>

https://codepen.io/mathiasmadsen/pen/xxRLKEg

Answer 4

我正在使用引导程序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>

这个多轮式传送带每次包含六个图像幻灯片。有空问我：）

Answer 5

我在 html 中使用了这种结构，使 te carousel 具有响应性，并且可以根据您需要的每张幻灯片的项目数轻松编辑。您可以在下面的链接中找到完整的代码。它需要 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>

链接 https://codepen.io/venda93/pen/BaQJOOK