css - 带有上一张和下一张图片的 Bootstrap 轮播

Question

我找到了这个例子来创建一个带有上一张和下一张图片的引导轮播。

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

所有图像都是 33%，但我希望它像这样:

10% |     80%      | 10%.

是否可以修改 css 使上一张和下一张图片占宽度的 10%，中间图片占宽度的 80%？

Answer 1

当元素组获得焦点时，它会添加 active 类。所以你可以这样做:

.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%;
}