Bootstrap 5 carousel - overlapping 50% left and right

Question

I found an awesome carousel here which works great with Bootstrap 5. Bootstrap carousel multiple frames at once

I would like to change three points:

1. a distance between the cards. For this I added a padding-left: 10px in <div class="col-md-3">. This works also so far. Is there still a "nicer" solution?

2. I would like to show a card on the left and on the right half as it is the case with slick in the center mode.

3. i would like to have the active card bigger than the others. I have tried with the active class which does not work in this example.

.active {
    transform: scale(1.15);
}

For the last two points I have not yet found a solution that works with Bootstrap 5.

Answer 1

I played around a bit using this sandbox: https://www.codeply.com/p/0CWffz76Q9

If you add following code-snippet in the css-box and hit the play button you can see the result.

It does need some tweaking, but hopefully it gets you going.

#recipeCarousel {
    border: solid;
}

.carousel-inner {
    overflow: visible!important;
}

.carousel-item.active > div:nth-child(2) > div.card {
    transform: scale(1.2);
    z-index: 1;
}

div.card {
    padding: 0 5px;
    border: unset;
}

.carousel-control-prev.bg-transparent.w-aut,
.carousel-control-next.bg-transparent.w-aut {
    background: white!important;
    opacity: 1;
}

NOTE: using !important is to be avoided at all cost. Only use it for testing things out quickly. You should actually use more specific selectors.