自举旋转木马一次多帧

这就是我试图用 Bootstrap 3 carousel 实现的效果

enter image description here

它不是一次只显示一帧，而是并排显示 N 帧。然后当你滑动时(或者当它自动滑动时) ，它会像这样移动一组幻灯片。

这可以通过引导3的旋转木马来实现吗？我希望我不必再去寻找另一个 jQuery 插件..。

504608 次浏览
小开

Bootstrap 5 (更新2021)

虽然在 Bootstrap 5中的 carousel 大致相同，但是 left和 right的概念已经改为 开始和 结束，因为 Bootstrap 现在支持 RTL。因此，左/右类都发生了变化。下面是一个针对4个项目(25% 宽度列)的多项目 CSS 示例..。

@media (min-width: 768px) {
    

.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(25%);
}
    

.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
}


.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0);
}

因为不再需要 jQuery，所以我们使用普通的 JS 将幻灯片克隆到 carousel-item div 中。

let items = document.querySelectorAll('.carousel .carousel-item')


items.forEach((el) => {
// number of slides per carousel-item
const minPerSlide = 4
let next = el.nextElementSibling
for (var i=1; i<minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})

Bootstrap 5多项旋转木马演示

Bootstrap 4 (2019年更新)

旋转木马已经在4.x 中改变，多幻灯片动画转换可以像这样覆盖..。

.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(33.33%);
}


.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-33.33%)
}
  

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{
transform: translateX(0);
}

引导程序4号阿尔法6号演示
Bootstrap 4.0.0(显示4，每次前进1)
Bootstrap 4.1.0(显示3，每次前进1)
Bootstrap 4.1.0(同时推进所有4个版本)
Bootstrap 4.3.1响应(显示多个，前进1) new
Bootstrap 4.3.1 carousel with card new

另一个选项是 有反应旋转木马，它只显示和推进 1张小屏幕上的幻灯片，但显示 多个幻灯片是更大的屏幕。这个例子没有像前面的例子那样克隆幻灯片，而是调整 CSS 并使用 jQuery 只移动额外的幻灯片，以允许连续循环(包装) :

请不要只是复制粘贴这些代码。首先，要了解它是如何工作的。

自举4响应(显示3,1幻灯片在手机上)

@media (min-width: 768px) {


/* show 3 items */
.carousel-inner .active,
.carousel-inner .active + .carousel-item,
.carousel-inner .active + .carousel-item + .carousel-item {
display: block;
}
    

.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
transition: none;
}
    

.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
position: relative;
transform: translate3d(0, 0, 0);
}
    

.carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: absolute;
top: 0;
right: -33.3333%;
z-index: -1;
display: block;
visibility: visible;
}
    

/* left or forward direction */
.active.carousel-item-left + .carousel-item-next.carousel-item-left,
.carousel-item-next.carousel-item-left + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
    

/* farthest right hidden item must be abso position for animations */
.carousel-inner .carousel-item-prev.carousel-item-right {
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
visibility: visible;
}
    

/* right or prev direction */
.active.carousel-item-right + .carousel-item-prev.carousel-item-right,
.carousel-item-prev.carousel-item-right + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(100%, 0, 0);
visibility: visible;
display: block;
visibility: visible;
}


}


<div class="container-fluid">
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
<div class="carousel-inner row w-100 mx-auto" role="listbox">
<div class="carousel-item col-md-4 active">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400/000/fff?text=1" alt="slide 1">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 3">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 4">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 5">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=6" alt="slide 6">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=7" alt="slide 7">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=8" alt="slide 7">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<i class="fa fa-chevron-left fa-lg text-muted"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
<i class="fa fa-chevron-right fa-lg text-muted"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>

例子 -自举4响应(显示4,1幻灯片在手机上)
示例-< strong > Bootstrap 4 Responsive (在手机上显示5,1幻灯片)

鞋带3

下面是 Bootplyhttp://bootply.com/89193上的一个3.x 示例

您需要将整行图像放在活动项中。这里是另一个版本，不堆叠在较小的屏幕宽度的图像: http://bootply.com/92514

编辑 一次推进一张幻灯片的替代方法:

使用 jQuery 克隆下一个条目. 。

$('.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));
}
});

然后 CSS 相应地定位..。

在3.3.1之前

.carousel-inner .active.left { left: -33%; }
.carousel-inner .next        { left:  33%; }

3.3之后

.carousel-inner .item.left.active {
transform: translateX(-33%);
}
.carousel-inner .item.right.active {
transform: translateX(33%);
}


.carousel-inner .item.next {
transform: translateX(33%)
}
.carousel-inner .item.prev {
transform: translateX(-33%)
}


.carousel-inner .item.right,
.carousel-inner .item.left {
transform: translateX(0);
}

这将 时间显示3，但只显示一张幻灯片在一个时间:

Bootstrap 3.x 演示

请不要复制粘贴此代码。首先，要了解它是如何工作的。 这个答案是对 帮助你学习的。

将这个修改过的引导4旋转木马加倍只能正常工作一半(滚动循环停止工作)
如何在不混合 css 和 jquery 的情况下在单个页面中制作2个 bootstrap 滑块？
Bootstrap 4 Multi Carousel 显示4个图像，而不是3 < br >

小开
最佳答案

这可以用引导程序3的旋转木马来完成吗? 我希望不会 寻找另一个 jQuery 插件

截至2013年12月8日，答案是否定的。您正在寻找的效果是不可能使用 Bootstrap 3的通用旋转木马插件。但是，这里有一个简单的 jQuery 插件，它似乎可以完全满足你的 http://sorgalla.com/jcarousel/需求

小开

试试这个... ... 它在我的... ..。 密码:

<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>


<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="span4" style="padding-left: 18px;">
<img src="http://placehold.it/290x180" class="img-thumbnail">
<img src="http://placehold.it/290x180" class="img-thumbnail">
<img src="http://placehold.it/290x180" class="img-thumbnail">
</div>
</div>
<div class="item">
<div class="span4" style="padding-left: 18px;">
<img src="http://placehold.it/290x180" class="img-thumbnail">
<img src="http://placehold.it/290x180" class="img-thumbnail">
<img src="http://placehold.it/290x180" class="img-thumbnail">
</div>
</div>
</div>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
小开

我遇到了同样的问题，这里描述的解决方案运行良好。但是我想支持窗口大小(和布局)的改变。结果是一个小库，解决了所有的计算。看这里: https://github.com/SocialbitGmbH/BootstrapCarouselPageMerger

为了使脚本工作，您必须添加一个新的 <div>包装器和类 .item-content 例如:

<div class="carousel slide multiple" id="very-cool-carousel" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="item-content">
First page
</div>
</div>
<div class="item active">
<div class="item-content">
Second page
</div>
</div>
</div>
</div>

此库的使用方法:

socialbitBootstrapCarouselPageMerger.run('div.carousel');

更改设置:

socialbitBootstrapCarouselPageMerger.settings.spaceCalculationFactor = 0.82;

例如:

如您所见，当您调整窗口大小时，carousel 将被更新以显示更多控件。检查 watchWindowSizeTimeout设置，以控制响应窗口大小变化的超时。

小开

这是一个有效的 Bootstrap。

以下是 Javascript:

$('#myCarousel').carousel({
interval: 10000
})


$('.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));
}
});

还有 CSS:

.carousel-inner .active.left  { left: -33%;             }
.carousel-inner .active.right { left: 33%;              }
.carousel-inner .next         { left: 33%               }
.carousel-inner .prev         { left: -33%              }
.carousel-control.left        { background-image: none; }
.carousel-control.right       { background-image: none; }
.carousel-inner .item         { background: white;      }

你可以在这个 Jsfiddle上看到它的运作

我之所以加上这个答案，是因为其他的答案并不完全有效。我发现其中有两个 bug，一个是左边的箭头产生了一个奇怪的效果，另一个是在某些情况下文字变粗，这可以通过设置背景颜色来解决，这样当过渡效果出现时，底部的项目不会被看到。

小开

您可以在 ol 标记中添加多个 li，它的属性为 class，值为“ carousel-ators”，并且使用 data-slide-to 具有0到6或0到9这样的顺序值。

比你只需要复制粘贴的 div，其中有属性作为类的值“ item”。

这对我有用。

<div data-ride="carousel" class="carousel slide" id="myCarousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="" data-slide-to="0" data-target="#myCarousel"></li>
<li data-slide-to="1" data-target="#myCarousel" class=""></li>
<li data-slide-to="2" data-target="#myCarousel" class="active"></li>
<li data-slide-to="3" data-target="#myCarousel" class=""></li>
<li data-slide-to="4" data-target="#myCarousel" class=""></li>
<li data-slide-to="5" data-target="#myCarousel" class=""></li>
<li data-slide-to="6" data-target="#myCarousel" class=""></li>
</ol>
<div role="listbox" class="carousel-inner">
<div class="item active">
<img alt="First slide" src="images/carousel/11.jpg"
class="first-slide">
</div>
<div class="item">
<img alt="Second slide" src="images/carousel/22.jpg"
class="second-slide">
</div>
<div class="item">
<img alt="Third slide" src="images/carousel/33.jpg"
class="third-slide">
</div>
<div class="item">
<img alt="Third slide" src="images/carousel/44.jpeg"
class="fourth-slide">
</div>
<div class="item">
<img alt="Third slide" src="images/carousel/55.jpg"
class="third-slide">
</div>
<div class="item">
<img alt="Third slide" src="images/carousel/66.jpg"
class="third-slide">
</div>
<div class="item">
<img alt="Third slide" src="images/carousel/77.jpg"
class="third-slide">
</div>
</div>
<a data-slide="prev" role="button" href="#myCarousel"
class="left carousel-control"> <span aria-hidden="true"
class="glyphicon glyphicon-chevron-left"></span> <span
class="sr-only">Previous</span>
</a> <a data-slide="next" role="button" href="#myCarousel"
class="right carousel-control"> <span aria-hidden="true"
class="glyphicon glyphicon-chevron-right"></span> <span
class="sr-only">Next</span>
</a>
</div>
小开

我就是这么做的。非常简单的 jQuery 和 CSS 使得响应旋转木马独立于同一页面上的旋转木马工作。高度可定制，但基本上是一个 div，其中包含一系列行内块元素，并将最后一个放在开始向后移动，或者将第一个放在结束向前移动。谢谢你 insertAfter！

$('.carosel-control-right').click(function() {
$(this).blur();
$(this).parent().find('.carosel-item').first().insertAfter($(this).parent().find('.carosel-item').last());
});
$('.carosel-control-left').click(function() {
$(this).blur();
$(this).parent().find('.carosel-item').last().insertBefore($(this).parent().find('.carosel-item').first());
});
@media (max-width: 300px) {
.carosel-item {
width: 100%;
}
}
@media (min-width: 300px) {
.carosel-item {
width: 50%;
}
}
@media (min-width: 500px) {
.carosel-item {
width: 33.333%;
}
}
@media (min-width: 768px) {
.carosel-item {
width: 25%;
}
}
.carosel {
position: relative;
background-color: #000;
}
.carosel-inner {
white-space: nowrap;
overflow: hidden;
font-size: 0;
}
.carosel-item {
display: inline-block;
}
.carosel-control {
position: absolute;
top: 50%;
padding: 15px;
box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.5);
transform: translateY(-50%);
border-radius: 50%;
color: rgba(0, 0, 0, 0.5);
font-size: 30px;
display: inline-block;
}
.carosel-control-left {
left: 15px;
}
.carosel-control-right {
right: 15px;
}
.carosel-control:active,
.carosel-control:hover {
text-decoration: none;
color: rgba(0, 0, 0, 0.8);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carosel" id="carosel1">
<a class="carosel-control carosel-control-left glyphicon glyphicon-chevron-left" href="#"></a>
<div class="carosel-inner">
<img class="carosel-item" src="http://placehold.it/500/bbbbbb/fff&amp;text=1" />
<img class="carosel-item" src="http://placehold.it/500/CCCCCC&amp;text=2" />
<img class="carosel-item" src="http://placehold.it/500/eeeeee&amp;text=3" />
<img class="carosel-item" src="http://placehold.it/500/f4f4f4&amp;text=4" />
<img class="carosel-item" src="http://placehold.it/500/fcfcfc/333&amp;text=5" />
<img class="carosel-item" src="http://placehold.it/500/f477f4/fff&amp;text=6" />
</div>
<a class="carosel-control carosel-control-right glyphicon glyphicon-chevron-right" href="#"></a>
</div>
<div class="carosel" id="carosel2">
<a class="carosel-control carosel-control-left glyphicon glyphicon-chevron-left" href="#"></a>
<div class="carosel-inner">
<img class="carosel-item" src="http://placehold.it/500/bbbbbb/fff&amp;text=1" />
<img class="carosel-item" src="http://placehold.it/500/CCCCCC&amp;text=2" />
<img class="carosel-item" src="http://placehold.it/500/eeeeee&amp;text=3" />
<img class="carosel-item" src="http://placehold.it/500/f4f4f4&amp;text=4" />
<img class="carosel-item" src="http://placehold.it/500/fcfcfc/333&amp;text=5" />
<img class="carosel-item" src="http://placehold.it/500/f477f4/fff&amp;text=6" />
</div>
<a class="carosel-control carosel-control-right glyphicon glyphicon-chevron-right" href="#"></a>
</div>

小开

最流行的答案是正确的，但我认为代码是无用的复杂。 使用相同的 css，这个 jquery 代码更容易理解，我相信:

$('#myCarousel').carousel({
interval: 10000
})


$('.carousel .item').each(function() {
var item = $(this);
item.siblings().each(function(index) {
if (index < 4) {
$(this).children(':first-child').clone().appendTo(item);
}
});
});
小开 
Try this code




<div id="recommended-item-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">


<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="img/home/recommend1.jpg" alt="" />
<h2>$56</h2>
<p>
Easy Polo Black Edition
</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>


</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="img/home/recommend2.jpg" alt="" />
<h2>$56</h2>
<p>
Easy Polo Black Edition
</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>


</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="img/home/recommend3.jpg" alt="" />
<h2>$56</h2>
<p>
Easy Polo Black Edition
</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>


</div>
</div>
</div>
</div>
<div class="item">
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="img/home/recommend1.jpg" alt="" />
<h2>$56</h2>
<p>
Easy Polo Black Edition
</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>


</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="img/home/recommend2.jpg" alt="" />
<h2>$56</h2>
<p>
Easy Polo Black Edition
</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>


</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="img/home/recommend3.jpg" alt="" />
<h2>$56</h2>
<p>
Easy Polo Black Edition
</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>


</div>
</div>
</div>
</div>
</div>
<a class="left recommended-item-control" href="#recommended-item-carousel" data-slide="prev"> <i class="fa fa-angle-left"></i> </a>
<a class="right recommended-item-control" href="#recommended-item-carousel" data-slide="next"> <i class="fa fa-angle-right"></i> </a>
</div>
小开 

    $('#carousel-example-generic').on('slid.bs.carousel', function () {
$(".item.active:nth-child(" + ($(".carousel-inner .item").length -1) + ") + .item").insertBefore($(".item:first-child"));
$(".item.active:last-child").insertBefore($(".item:first-child"));
});    
        .item.active,
.item.active + .item,
.item.active + .item  + .item {
width: 33.3%;
display: block;
float:left;
}          
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="max-width:800px;">
<!-- Indicators -->
<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>


<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img data-src="holder.js/300x200?text=1">
</div>
<div class="item">
<img data-src="holder.js/300x200?text=2">
</div>
<div class="item">
<img data-src="holder.js/300x200?text=3">
</div>
<div class="item">
<img data-src="holder.js/300x200?text=4">
</div>
<div class="item">
<img data-src="holder.js/300x200?text=5">
</div>
<div class="item">
<img data-src="holder.js/300x200?text=6">
</div>
<div class="item">
<img data-src="holder.js/300x200?text=7">
</div>
</div>


<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" 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="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.1/holder.min.js"></script>

小开

以上所有的解决方案都是错误的。想都别想。用别的词。我所发现的最好的 http://sachinchoolur.github.io/lightslider 工程伟大的自举，不添加垃圾 html，高度可配置，响应，移动友好等。

$('.multi-item-carousel').lightSlider({
item: 4,
pager: false,
autoWidth: false,
slideMargin: 0
});
小开

我已经看到你的问题和答案，并作出了一个新的响应和灵活的多项目旋转木马要点。你可以在这里看到:

Https://gist.github.com/ivir3zam/d143a361e61459146ae7c68ce86b066e

小开

参考 到上面的链接，我添加了一个新的东西，叫做 < strong > show 4 at time，为 bootstrap 3(v3.3.7)一次幻灯片一个

编译: pestwave https://www.CODEPLY.com/go/ewubglspqu :

现场截图

(function(){
$('#carousel123').carousel({ interval: 2000 });
}());


(function(){
$('.carousel-showmanymoveone .item').each(function(){
var itemToClone = $(this);


for (var i=1;i<4;i++) {
itemToClone = itemToClone.next();


// wrap around if at end of item collection
if (!itemToClone.length) {
itemToClone = $(this).siblings(':first');
}


// grab item, clone, add marker class, add to collection
itemToClone.children(':first-child').clone()
.addClass("cloneditem-"+(i))
.appendTo($(this));
}
});
}());
body {
margin-top: 50px;
}


.carousel-showmanymoveone .carousel-control {
width: 4%;
background-image: none;
}
.carousel-showmanymoveone .carousel-control.left {
margin-left: 15px;
}
.carousel-showmanymoveone .carousel-control.right {
margin-right: 15px;
}
.carousel-showmanymoveone .cloneditem-1,
.carousel-showmanymoveone .cloneditem-2,
.carousel-showmanymoveone .cloneditem-3 {
display: none;
}
@media all and (min-width: 768px) {
.carousel-showmanymoveone .carousel-inner > .active.left,
.carousel-showmanymoveone .carousel-inner > .prev {
left: -50%;
}
.carousel-showmanymoveone .carousel-inner > .active.right,
.carousel-showmanymoveone .carousel-inner > .next {
left: 50%;
}
.carousel-showmanymoveone .carousel-inner > .left,
.carousel-showmanymoveone .carousel-inner > .prev.right,
.carousel-showmanymoveone .carousel-inner > .active {
left: 0;
}
.carousel-showmanymoveone .carousel-inner .cloneditem-1 {
display: block;
}
}
@media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) {
.carousel-showmanymoveone .carousel-inner > .item.active.right,
.carousel-showmanymoveone .carousel-inner > .item.next {
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0);
left: 0;
}
.carousel-showmanymoveone .carousel-inner > .item.active.left,
.carousel-showmanymoveone .carousel-inner > .item.prev {
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
left: 0;
}
.carousel-showmanymoveone .carousel-inner > .item.left,
.carousel-showmanymoveone .carousel-inner > .item.prev.right,
.carousel-showmanymoveone .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
@media all and (min-width: 992px) {
.carousel-showmanymoveone .carousel-inner > .active.left,
.carousel-showmanymoveone .carousel-inner > .prev {
left: -25%;
}
.carousel-showmanymoveone .carousel-inner > .active.right,
.carousel-showmanymoveone .carousel-inner > .next {
left: 25%;
}
.carousel-showmanymoveone .carousel-inner > .left,
.carousel-showmanymoveone .carousel-inner > .prev.right,
.carousel-showmanymoveone .carousel-inner > .active {
left: 0;
}
.carousel-showmanymoveone .carousel-inner .cloneditem-2,
.carousel-showmanymoveone .carousel-inner .cloneditem-3 {
display: block;
}
}
@media all and (min-width: 992px) and (transform-3d), all and (min-width: 992px) and (-webkit-transform-3d) {
.carousel-showmanymoveone .carousel-inner > .item.active.right,
.carousel-showmanymoveone .carousel-inner > .item.next {
-webkit-transform: translate3d(25%, 0, 0);
transform: translate3d(25%, 0, 0);
left: 0;
}
.carousel-showmanymoveone .carousel-inner > .item.active.left,
.carousel-showmanymoveone .carousel-inner > .item.prev {
-webkit-transform: translate3d(-25%, 0, 0);
transform: translate3d(-25%, 0, 0);
left: 0;
}
.carousel-showmanymoveone .carousel-inner > .item.left,
.carousel-showmanymoveone .carousel-inner > .item.prev.right,
.carousel-showmanymoveone .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<div class="carousel carousel-showmanymoveone slide" id="carousel123">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive"></a></div>
</div>
</div>
<a class="left carousel-control" href="#carousel123" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#carousel123" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

小开

更新2019-03-06—— Bootstrap v4.3.1

新的 Bootstrap 版本似乎在每个项目上都添加了一个 margin-right: -100%，因此在 最受欢迎的答案中给出的响应解决方案中，这个属性应该被重置，例如:

.carousel-inner .carousel-item {
margin-right: inherit;
}

一个正常工作的 在 LESS 中使用 v4.3.1进行 codepen。

小开

仅仅使用 引导程序3.4旋转木马和 引导程序4.5旋转木马 javascript 组件特性来实现这一点本身就过于复杂和混乱。

好吧，所以你不想 还没有另一个 jQuery 插件... 我明白了。

在我看来，如果你已经被迫在你的项目中使用 jQuery，那么你最好拥有一个像样的 jQuery carousel 插件，它有很多强大的选项。

Slick.js 你最不需要的旋转木马 Ken Wheeler

         _ _      _       _
___| (_) ___| | __  (_)___
/ __| | |/ __| |/ /  | / __|
\__ \ | | (__|   < _ | \__ \
|___/_|_|\___|_|\_(_)/ |___/
|__/

这确实是你需要的最后一个 jQuery carousel 插件。


这里是小型的 狡猾的 Js分配尺寸..。


你可能会面临的一些情况。

  • 不幸的是，如果您只是从 CDN 或其他地方提取分布式 Bootstrap 3或4 js和 css缩小文件，那么它是另一个添加到您的网站网络请求的庞大 jQuery 插件。
  • 如果您正在使用 NPM，Gulp，Bower 或任何您可以排除 Bootstraps carousel.js和 carousel.scss供应商，以减少您的 css和 js文件的最终编译大小。排除所有未使用的引导 js和 scss供应商将有助于减少您最终编译的输出文件无论如何。

使用 狡猾的 Js增加奖金..。

  • 触摸/滑动滚动设备上的旋转木马(你也可以在桌面上拖动)
  • 为每个响应断点定义 carousel 选项
  • 设置 mobileFirst: true或 false以处理响应断点方向
  • 设置要显示或滚动多少幻灯片(列)(为每个断点定义)
  • 垂直和水平旋转木马
  • .on事件为一切
  • 很多选择


Bootstrap 3多列光滑旋转木马示例

请参阅下面的 Codepen链接来响应地测试示例..。

// bootstrap 3 breakpoints
const breakpoint = {
// extra small screen / phone
xs: 480,
// small screen / tablet
sm: 768,
// medium screen / desktop
md: 992,
// large screen / large desktop
lg: 1200
};


// bootstrap 3 responsive multi column slick carousel
$('#slick').slick({
autoplay: true,
autoplaySpeed: 2000,
draggable: true,
pauseOnHover: false,
infinite: true,
dots: false,
arrows: false,
speed: 1000,
  

mobileFirst: true,
  

slidesToShow: 1,
slidesToScroll: 1,
  

responsive: [{
breakpoint: breakpoint.xs,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: breakpoint.sm,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},
{
breakpoint: breakpoint.md,
settings: {
slidesToShow: 4,
slidesToScroll: 4
}
},
{
breakpoint: breakpoint.lg,
settings: {
slidesToShow: 5,
slidesToScroll: 5
}
}
]
});
/* .slick-list emulates .row */
#slick .slick-list {
margin-left: -15px;
margin-right: -15px;
}


/* .slick-slide emulates .col- */
#slick .slick-slide {
padding-right: 15px;
padding-left: 15px;
}


#slick .slick-slide:focus {
outline: none;
}
<!-- jquery 3.3 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<!-- bootstrap 3.4 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>


<!-- slick 1.9 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>


<!-- bootstrap 3 responsive multi column slick carousel example -->


<header>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="navbar-header" style="float:left!important;">
<a class="navbar-brand" href="#">Slick in Bootstrap 3</a>
</div>
<div class="navbar-text pull-right" style="margin:15px!important;">
<a class="navbar-link" href="http://kenwheeler.github.io/slick/" target="_blank">Slick Github</a>
</div>
</nav>
</header>


<main>
<div class="container">
<div id="slick">


<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>


<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>


<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>


<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>


<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>


<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
      

<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>


<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>


<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>


<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>


</div>
</div>
</main>


Bootstrap 4多列光滑旋转木马示例

请参阅下面的 Codepen链接来响应测试示例..。

// bootstrap 4 breakpoints
const breakpoint = {
// small screen / phone
sm: 576,
// medium screen / tablet
md: 768,
// large screen / desktop
lg: 992,
// extra large screen / wide desktop
xl: 1200
};


// bootstrap 4 responsive multi column slick carousel
$('#slick').slick({
autoplay: true,
autoplaySpeed: 2000,
draggable: true,
pauseOnHover: false,
infinite: true,
dots: false,
arrows: false,
speed: 1000,
  

mobileFirst: true,
  

slidesToShow: 1,
slidesToScroll: 1,
  

responsive: [{
breakpoint: breakpoint.sm,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: breakpoint.md,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},
{
breakpoint: breakpoint.lg,
settings: {
slidesToShow: 4,
slidesToScroll: 4
}
},
{
breakpoint: breakpoint.xl,
settings: {
slidesToShow: 5,
slidesToScroll: 5
}
}
]
});
/* .slick-list emulates .row */
#slick .slick-list {
margin-left: -15px;
margin-right: -15px;
}


/* .slick-slide emulates .col- */
#slick .slick-slide {
padding-right: 15px;
padding-left: 15px;
}


#slick .slick-slide:focus {
outline: none;
}
<!-- jquery 3.5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<!-- bootstrap 4.5 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"></script>


<!-- slick 1.9 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>


<!-- bootstrap 4 responsive multi column slick carousel example -->
    

<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand mr-auto" href="#">Slick in Bootstrap 4</a>
<a class="nav-link d-none d-sm-inline" href="http://kenwheeler.github.io/slick/" target="_blank">Slick Github</a>
</nav>
</header>


<main class="py-4">
<div class="container">
<div id="slick">


<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>


<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>


<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>


<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>


<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>


<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
      

<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>


<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>


<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>


<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>


</div>
</div>
</main>

小开

更新2022-带有多个项目的引导程序5旋转木马

您可以管理这个任务与引导5 CSS 自定义绝对

这是一个非常棒的 web 开发者的教程 自举5旋转木马多项目增量1

enter image description here

良好的教程与中间活结果改变后的变化

如果你想要增加第四张卡片的大小(我建议这样做是为了给用户一个更清晰的提示，那就是有一张下面的卡片) ，只需要从33.333333% 减少到例如30% this

@media (min-width: 768px) {
.carousel-inner {
display: flex;
}
.carousel-item {
margin-right: 0;
flex: 0 0 33.333333%;
display: block;
}
}

提交答案