Question

另一个问题是针对bootstrap 3的相同需求（that question），但建议的解决方案不适用于Bootstrap 4。

这篇文章的图片很好地解释了我想要的东西。

如何使用Bootstrap 4实现此目的？

Answer 1

＆＃13;

    $('#carousel-example-generic').on('slid.bs.carousel', function () {
        $(".carousel-item.active:nth-child(" + ($(".carousel-inner .carousel-item").length -1) + ") + .carousel-item").insertBefore($(".carousel-item:first-child"));
        $(".carousel-item.active:last-child").insertBefore($(".carousel-item:first-child"));
    });

＆＃13;

        .carousel-item.active,
        .carousel-item.active + .carousel-item,
        .carousel-item.active + .carousel-item  + .carousel-item {
           width: 33.3%;
           display: block;
           float:left;
        }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
    <h1>Hello, world!</h1>
<div class="container"> 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img data-src="holder.js/300x200?text=1">
    </div>
    <div class="carousel-item">
      <img data-src="holder.js/300x200?text=2">
    </div>    
    <div class="carousel-item">
      <img data-src="holder.js/300x200?text=3">
    </div>    
    <div class="carousel-item">
      <img data-src="holder.js/300x200?text=4">
    </div>    
    <div class="carousel-item">
      <img data-src="holder.js/300x200?text=5">
    </div>    
    <div class="carousel-item">
      <img data-src="holder.js/300x200?text=6">
    </div>    
    <div class="carousel-item">
      <img data-src="holder.js/300x200?text=7">
    </div>
  </div>
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="icon-prev" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="icon-next" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
   
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.1/holder.min.js"></script>

＆＃13;

Answer 2

更新2018年

查看Bootstrap 4 docs，并将标记更改为Bootstrap 4：

http://bootply.com/SObwIezDyx

Bootstrap 4 Beta 选项：https://stackoverflow.com/a/20008623/171456

Bootstrap 4 Carousel一次多个帧并逐个滑动

2 个答案: