jQuery Bootstrap 4 Carousel 一次多帧并逐个滑动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35152475/
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 Carousel Multiple frames at once and slide by one
提问by Elie Teyssedou
Another question was asked on the same need (that question) for bootstrap 3 but the proposed solutions don't work with Bootstrap 4.
针对 bootstrap 3的相同需求（那个问题）提出了另一个问题，但建议的解决方案不适用于 Bootstrap 4。
The image of this post explains very well what I want.
这篇文章的图片很好地解释了我想要什么。
And even more this bootply.
甚至更多这个bootply。
How can I achieve this with Bootstrap 4 ?
如何使用 Bootstrap 4 实现这一目标？
采纳答案by Bass Jobsen
$('#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"));
}); .carousel-item.active,
.carousel-item.active + .carousel-item,
.carousel-item.active + .carousel-item + .carousel-item {
width: 33.3%;
display: block;
float:left;
} <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>回答by Zim
Update 2018
2018 年更新
Take a look at the Bootstrap 4 docs, and change the markup to Bootstrap 4:
查看Bootstrap 4 文档，并将标记更改为 Bootstrap 4：
Bootstrap 4 Betaoptions: https://stackoverflow.com/a/20008623/171456
Bootstrap 4 Beta选项：https: //stackoverflow.com/a/20008623/171456
