Bootstrap 4 Multi Carousel显示4张图片，而不是3张图片 [英] Bootstrap 4 Multi Carousel show 4 images instead of 3

问题描述

我不知道如何显示4张而不是3张图片.

I can't figure out how to make it show 4 images instead of 3.

基于此代码:Bootstrap 4多个项目转盘

脚本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">

推荐答案

由于4列，宽度为25％(而不是33％)，请更改CSS:

Since 4 cols, are 25% width (instead of 33%) change the 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的更改是:

Also an additional item needs to be cloned into each slide. So the JS change is:

$('.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演示-4张幻灯片，前进1张

注意:从alpha 6(当询问原始问题时)到 Bootstrap 4.0.0 ，活动的轮播项目变为flexbox.因此，必须对多轮播中的相邻项执行相同的操作.

Note: From alpha 6 (when the original question was asked) to Bootstrap 4.0.0, the active carousel-item changed to flexbox. Therefore, the same must be done for the neighboring items in the multi-carousel.

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

另请参见: Bootstrap 4.1.0(同时推进全部4个)

这篇关于Bootstrap 4 Multi Carousel显示4张图片，而不是3张图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！