带有上一张和下一张图像的Bootstrap Carousel

Question

我发现这个例子创建了一个带有上一张和下一张图像的bootstrap轮播。

https://codepen.io/glebkema/pen/RKavve

所有图片均为33％，但我希望如此：

10% |     80%      | 10%.

是否可以修改css以使上一个和下一个图像的宽度为10％，中心图像为80％？

Answer 1

当项目组获得焦点时，它会添加活动类。所以你可以这样做：

.item.active .item__third:nth-child(1), .item.active .item__third:nth-child(3) {
width:10%;
}

.item.active .item__third:nth-child(2) {
width:80%;
}

或者通常在 .item .item__third 类：

.item .item__third:nth-child(1), .item .item__third:nth-child(3) {
width:10%;
}

.item .item__third:nth-child(2) {
width:80%;
}