Bootstrap Carousel with previous and next image

Question

I found this example to create a bootstrap carousel with previous and next images.

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

All images are 33% but I would like to have it like:

10% |     80%      | 10%.

Is it possible to modify the css to make the previous and next image 10% of the width and the center image 80% ?

Answer 1

When the item group is getting focus, it adds the active class. So you can do something like this:

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

Or generally on .item .item__third class:

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

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