I'm trying to create a multi-item carousel using YouTube videos, and although I have managed to get it working with Bootstrap 5 carousel and cards, the animation when the carousel slides is not as smooth as I would like. The issue seems to be that the cards overlap during the slide transition, even after adjusting the values in transform: translateX(%). Any suggestions on how to improve this?
Here is the code for the carousel, which displays 3 cards with embedded YouTube videos and titles at the bottom:
<!--Carousel 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">
<iframe src="https://www.youtube.com/embed/rf8vM_X1g9U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p class="fs-5 fw-bold">Experience John Deere, Expo Agroalimentaria 2021</p>
</div>
<div class="carousel-item">
<iframe src="https://www.youtube.com/embed/3xq7z7WBOGU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p class="fs-5 fw-bold">Harvest in Sight, Forage Harvester 8300i</p>
</div>
<div class="carousel-item">
<iframe src="https://www.youtube.com/embed/9PBeqHEopLs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p class="p-2 mb-2 fs-5 fw-bold">Harvest in Sight, CH570</p>
</div>
</div>
</div>
</div>
</div>
<!--Carousel Videos-->
This is the CSS where I have applied 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);
}
Lastly, here is the JavaScript code for the carousel functionality:
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
}
})
Here is an image of how the carousel looks in my project: carousel-image