【问题标题】:Bootstrap Multiple Items Carousel (several carousel items shown at once) [duplicate]Bootstrap 多个项目轮播(一次显示几个轮播项目)[重复]
【发布时间】:2017-03-16 13:09:39
【问题描述】:

如何在 Bootstrap 4 中实现多项目轮播?文档提到了多个轮播,但没有提到包含多个项目的轮播。

【问题讨论】:

  • “多商品轮播”是什么意思?
  • multiple items carousel 表示同时显示多个轮播项目。
  • 这将如何工作?这些项目是作为一个组导航还是单独导航?
  • 你需要添加一些代码@SemanticUI没有代码你无法得到正确的答案。
  • 项目单独导航

标签: html css twitter-bootstrap bootstrap-4 bootstrap-5


【解决方案1】:

引导程序 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/3EQkUOhhZzBootstrap 4.0.0

响应式 3 个大型项目(一次 1 个),1 个小型项目:
http://codeply.com/go/s3I9ivCBYH


另见:https://stackoverflow.com/a/20008623/171456

【讨论】:

  • 这将用于一次显示 3 个项目。如果你想要更多物品,你会怎么做?喜欢 6
  • @Zim 不幸的是,当向后退时,这有一个奇怪的“滑过上一张幻灯片”动画。与您的解决方案不同,它具有相同的向前和向后动画。
  • 我在 CSS 中找到了先前幻灯片动画错误的原因:这是一个固定版本,动画双向工作:codeply.com/go/3o7YpVVEdP
  • @santyas setting .carousel-item {margin-right: 0%;} 解决了这个问题。 codepen.io/timar/pen/mabyEg
  • 在 Bootstrap 4.3 上,这些解决方案仅将最后一个轮播项目显示为第一个项目……知道如何解决这个问题吗?
【解决方案2】:

我在 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>

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

【讨论】:

    【解决方案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

    【讨论】:

    • 最佳答案!!谢谢
    【解决方案4】:

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

    这个多轮播的六张图片每次都以散装形式滑动。随意问我:)

    【讨论】:

      【解决方案5】:

      您可以一次显示一个轮播项目,但可以用多个元素填充它。比如:

      .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

      【讨论】:

      • 当要显示的项目大于 3 时,为什么 slick.js 不会在轮播项目之间添加空格?
      • 它有默认的样式规则,比如 bootstrap。不过,这些可以根据需要进行更改。如果你为你的项目添加填充,它们之间应该总是有一些空格。
      • 我尝试在 div 和 img 上添加填充,但没有放置任何空格。
      • 你能把它挂在一个codepen上快速地工具吗?
      • 我会尝试学习 codeopen,但现在我编辑了 slick-slide 并将其设置为 margin: 0px 20px;那是直接改的地方吗?
      猜你喜欢
      • 1970-01-01
      • 2022-01-08
      • 2017-09-21
      • 2019-07-11
      • 2014-10-10
      • 1970-01-01
      • 1970-01-01
      • 2019-01-21
      • 1970-01-01
      相关资源
      最近更新 更多