I am working on an Angular 17 web app and using Bootstrap 5 to create multiple cards in a carousel. Unfortunately it’s just showing 1 card instead of 4.

The result I am expecting will look like this: https://www.codeply.com/p/0CWffz76Q9

I used the same code (copy and paste) but cannot understand why getting different result.

Find below my code.

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

<div class="container text-center my-5 bg-black">
  <div class="row mx-auto my-auto justify-content-center">
    <div id="recipeCarousel" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
          <div class="col-md-3">
            <div class="card">
              <div class="card-img">
                <img src="//via.placeholder.com/500x400/31f?text=1" class="img-fluid">
              </div>
              <div class="card-img-overlay">Slide 1</div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-md-3">
            <div class="card">
              <div class="card-img">
                <img src="//via.placeholder.com/500x400/e66?text=2" class="img-fluid">
              </div>
              <div class="card-img-overlay">Slide 2</div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-md-3">
            <div class="card">
              <div class="card-img">
                <img src="//via.placeholder.com/500x400/7d2?text=3" class="img-fluid">
              </div>
              <div class="card-img-overlay">Slide 3</div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-md-3">
            <div class="card">
              <div class="card-img">
                <img src="//via.placeholder.com/500x400?text=4" class="img-fluid">
              </div>
              <div class="card-img-overlay">Slide 4</div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-md-3">
            <div class="card">
              <div class="card-img">
                <img src="//via.placeholder.com/500x400/aba?text=5" class="img-fluid">
              </div>
              <div class="card-img-overlay">Slide 5</div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-md-3">
            <div class="card">
              <div class="card-img">
                <img src="//via.placeholder.com/500x400/fc0?text=6" class="img-fluid">
              </div>
              <div class="card-img-overlay">Slide 6</div>
            </div>
          </div>
        </div>
      </div>
      <a class="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      </a>
      <a class="carousel-control-next bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
      </a>
    </div>
  </div>
</div>

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);
}

JS

let items = document.querySelectorAll('.carousel .carousel-item')
items.forEach((el) => {
  const minPerSlide = 4
  let next = el.nextElementSibling
  for (var i=1; i<minPerSlide; i++) {
    if (!next) {
      // wrap carousel by using first child
      next = items[0]
    }
    let cloneChild = next.cloneNode(true)
    el.appendChild(cloneChild.children[0])
    next = next.nextElementSibling
  }
})

Could someone please help me understanding what I did wrong ?

Thank you