Bootstrap 一次轮播多个框架

这是我试图用 Bootstrap 3 轮播实现的效果

它不是一次只显示一帧，而是并排显示 N 帧。然后，当您滑动（或自动滑动时）时，它会像以前一样移动幻灯片组。

这可以吗与 bootstrap 3 的轮播？我希望我不必去寻找另一个 jQuery 插件......

引导程序5（2021 年更新）

虽然轮播在 Bootstrap 5 中基本相同，但其概念left and right已更改为start and end因为 Bootstrap 现在具有 RTL 支持。因此左/右类别发生了变化。下面是 4 个项目的多项目 CSS 示例（25% 宽度的列）...

@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，我们使用 vanilla JS 将幻灯片克隆到carousel-item divs..

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 多项目轮播演示 https://codeply.com/p/0CWffz76Q9

引导程序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);
}

Bootstrap 4 Alpha.6 Demo http://codeply.com/go/FrzoIEKCdH/bootstrap-4-carousel-multiple
Bootstrap 4.0.0 (show 4, advance 1 at a time) http://www.codeply.com/go/3EQkUOhhZz
Bootstrap 4.1.0 (show 3, advance 1 at a time) https://www.codeply.com/go/SgN7j7h4dV
Bootstrap 4.1.0 (advance all 4 at once) https://www.codeply.com/go/HDu8lT7NxJ
Bootstrap 4.3.1 responsive (show multiple, advance 1)new https://www.codeply.com/go/zjZsn1ly29
Bootstrap 4.3.1 carousel with cardsnew https://www.codeply.com/go/EIOtI7nkP8

另一种选择是反应灵敏仅显示和前进的轮播小屏幕上的 1 张幻灯片，但显示多张幻灯片是更大的屏幕。这个示例没有像上一个示例那样克隆幻灯片，而是调整 CSS 并仅使用 jQuery 移动额外的幻灯片以允许连续循环（环绕）：

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

Bootstrap 4 响应式（在移动设备上显示 3、1 幻灯片） http://www.codeply.com/go/s3I9ivCBYH/multi-carousel-single-slide-bootstrap-4

@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>

例子 -Bootstrap 4 响应式（在移动设备上显示 4、1 幻灯片） https://www.codeply.com/view/JEAsn1lz3a
例子 -Bootstrap 4 响应式（在移动设备上显示 5、1 幻灯片） https://www.codeply.com/go/UBE4KZIeSJ

引导程序3

这是 Bootply 上的 3.x 示例：http://bootply.com/89193 http://bootply.com/89193

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

EDIT替代方法一次前进一张幻灯片:

使用 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.1之后

.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 演示 https://www.bootply.com/DKihet1ZM9

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

将这个修改后的 bootstrap 4 轮播加倍只能正确运行一半（滚动循环停止工作） https://stackoverflow.com/questions/49343385/doubling-up-this-modified-bootstrap-4-carousel-only-functions-half-correctly-sc/49343508#49343508
如何在单页中制作2个引导滑块而不混合它们的css和jquery？ https://stackoverflow.com/questions/49450116
Bootstrap 4 Multi Carousel 显示 4 张图像而不是 3 张 https://stackoverflow.com/questions/48631386/bootstrap-4-multi-carousel-show-4-images-instead-of-3/48631630#48631630