Bootstrap 5 с несколькими карточками карусели показывает только одну карточку ⇐ CSS

[Anonymous]

Я работаю над веб-приложением Angular 17 и использую Bootstrap 5 для создания нескольких карточек в карусели. К сожалению, отображается только 1 карточка вместо 4.
Результат, который я ожидаю, будет выглядеть так: https://www.codeply.com/p/0CWffz76Q9
Я использовал тот же код (скопировал и вставил), но не могу понять, почему результат получился другой.
Найдите мой код ниже.
PACKAGE.JSON

Код: Выделить всё

{
"bootstrap": "^5.3.1",
"jquery": "^3.7.0"
}

ANGULAR.JSON

Код: Выделить всё

{
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.css",
"node_modules/@fortawesome/fontawesome-free/css/all.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/bootstrap/dist/js/bootstrap.js"
]
}

HTML

Код: Выделить всё

[img]//via.placeholder.com/500x400/31f?text=1[/img]

Slide 1







[img]//via.placeholder.com/500x400/e66?text=2[/img]

Slide 2







[img]//via.placeholder.com/500x400/7d2?text=3[/img]

Slide 3







[img]//via.placeholder.com/500x400?text=4[/img]

Slide 4







[img]//via.placeholder.com/500x400/aba?text=5[/img]

Slide 5







[img]//via.placeholder.com/500x400/fc0?text=6[/img]

Slide 6




[url=#recipeCarousel]

[/url]
[url=#recipeCarousel]

[/url]

CSS

Код: Выделить всё

@media (max-width: 767px) {
.carousel-inner .carousel-item > div {
display: none;
}
.carousel-inner .carousel-item > div:first-child {
display: block;
}
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {

.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(25%);
}

.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0);
}

ЯВЛЯЕТСЯ

Код: Выделить всё

let items = document.querySelectorAll('.carousel .carousel-item')
items.forEach((el) => {
const minPerSlide = 4
let next = el.nextElementSibling
for (var i=1; i

Подробнее здесь: [url]https://stackoverflow.com/questions/78751474/bootstrap-5-multiple-carousel-cards-shows-only-one-card[/url]