Animation slide in multi item carousel with youtube videos Bootstrap 5 and Angular

I need to make a multi item carousel with youtube videos, I found one example and made it work for me using bootstrap 5 carousel and cards, but the animation when de carousel slides is not fluid, the problem is the cards overlaps when the carousel slide, I tried to change the values on transform: translateX(%) but the animation is not that fluid, any advice on this?

This is the carosuel code, this displays 3 cards with the videos and the tittle in the bottom, as you can see I’m using iframe to call the youTube videos

<!--Carrusel videos-->
      <div class="col-lg-12 ms-2 mt-5">
        <div class="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-4 me-2">
                      <div class="card">
                        <iframe src="https://www.youtube.com/embed/rf8vM_X1g9U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                      </div>
                      <div id="cardHeight" class="d-flex align-items-center text-center justify-content-center">
                        <p class="fs-5 fw-bold">Experiencia John Deere, Expo Agroalimentaria 2021</p>
                      </div> 
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-4 me-2">
                      <div class="card">
                        <iframe src="https://www.youtube.com/embed/3xq7z7WBOGU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                      </div>
                      <div id="cardHeight" class="d-flex text-center align-items-center justify-content-center">
                        <p  class="fs-5 fw-bold">Cosecha en la mira, Ensiladora 8300i</p>
                      </div> 
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-4 me-2">
                      <div class="card">
                        <iframe src="https://www.youtube.com/embed/9PBeqHEopLs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                      </div>
                      <div id="cardHeight" class="d-flex align-items-center text-center justify-content-center">
                        <p class="p-2 mb-2 fs-5 fw-bold">Cosecha en la mira, CH570</p>
                      </div> 
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-4 me-2">
                      <div class="card">
                        <iframe src="https://www.youtube.com/embed/1jeHyrRskdk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                      </div>
                      <div id="cardHeight" class="d-flex align-items-center text-center justify-content-center">
                        <p class="p-2 mb-2 fs-5 fw-bold">"EL INGE" Arandas, Jalisco</p>
                      </div>  
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-4 me-2">
                      <div class="card">
                        <iframe src="https://www.youtube.com/embed/KauOtgNuzQQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                      </div>
                      <div id="cardHeight" class="d-flex align-items-center text-center justify-content-center">
                        <p class="p-2 mb-2 fs-5 fw-bold">"EL INGE" Ayotlán, Jalisco</p>
                      </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>
      <!--Carrusel videos-->

This is the CSS where i have the transform: translateX()%

#cardHeight {
  height: 80px;
}

@media only screen and (min-width: 768px) {
  iframe{
    height: 24em;
  }
  .card{
    width: 100%;
  }
}

@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(33%);
  }
  
  .carousel-inner .carousel-item-start.active, 
  .carousel-inner .carousel-item-prev {
    transform: translateX(-33%);
  }
}

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

An finally the JS for the carousel

  let items = document.querySelectorAll('.carousel .carousel-item')

  items.forEach((el) => {
    const minPerSlide = 3
    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
    }
})

I’ll leave an image of my project to show you how this carousel is displayed in my project
carousel-image