carousel - Bootstrap 4 Multi Carousel 显示 4 张图像而不是 3 张

Question

我不知道如何让它显示 4 个图像而不是 3 个。

Based on this Code: Bootstrap 4 Multiple Item Carousel

脚本JS

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

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

CSS

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

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

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

我已更改为此代码

<div class="carousel-item col-md-3">

代替原来的代码

<div class="carousel-item col-md-4">

Answer 1

由于 4 列，宽度为 25%(而不是 33%)，因此更改 CSS:

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

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

此外，还需要将一个附加项目克隆到每张幻灯片中。所以JS的改动是:

$('.carousel .carousel-item').each(function(){
    var next = $(this).next();
    if (!next.length) {
    next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    for (var i=0;i<2;i++) {
        next=next.next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }

        next.children(':first-child').clone().appendTo($(this));
      }
});

Bootstrap 4.0.0 Demo - 4 slides, advance 1

注意:从 alpha 6(提出原始问题时)到 Bootstrap 4.0.0，事件的轮播项更改为 Flexbox。因此，必须对多轮播中的相邻项目执行相同的操作。

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}

另请参阅:Bootstrap 4.1.0 (advance all 4 at once)