Question

我一直在Bootstrap 4上使用这个版本的多图像旋转木马，但我无法弄清楚如何让它显示4个图像而不是3个。守则：https://www.codeply.com/go/s3I9ivCBYH/multi-carousel-single-slide-bootstrap-4

Answer 1

Bootstrap使用cols，用于将页面分成12个相等的部分。所以，你首先需要将幻灯片div更改为col-md-3而不是4，这使得每一个宽度为25％（3/12）而不是33.33（4/12）：

class =＆＃34; carousel-item col-md-4 有效＆＃34;

-to -

class =＆＃34; carousel-item col-md-3 有效＆＃34;

接下来通过添加另一个＆＃34; .carousel-item＆＃34;：

进行更改

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

到

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

最后通过添加另一个＆＃34; .carousel-item＆＃34;来再创建一个幻灯片：

/*make 4 slides visible*/
.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;
    }

Bootstrap4：多图像轮播

1 个答案: