I'm currently working with a Bootstrap 5 carousel and trying to implement a transition effect where clicking the "next" arrow will smoothly fade out the current image before fading in the next one. This is necessary because the images in my carousel vary in size, making the abrupt transition look unappealing.
This is the current setup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testing</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="73111c1c07000701120333465d405d41">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="testing.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e1c11110a0d0a0c1f0e53171d11100d3e4f504f4f504c">[email protected]</a>/font/bootstrap-icons.min.css">
<script defer src="testing.js"></script>
</head>
<body style="max-width: 100%; overflow-x:hidden; background-color:black;">
<div class="container-lg">
<div class="row justify-content-center text-center align-items-center">
<div class="col-4">
<div id="myCarousel" class="carousel slide carousel-fade">
<div class="carousel-inner">
<div class="carousel-item active img-fluid">
<img src = "image1.jpg" class = "img-fluid">
</div>
<div class="carousel-item img-fluid">
<img src = "image2.jpg" class = "img-fluid">
</div>
</div>
</div>
<button class="carousel-control-prev" onclick="nextSlide()" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" onclick="nextSlide()" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="14767b7b60676066756454213a273a26">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Below is my custom CSS:
.carousel-item {
width: 100%;
height: 100%;
overflow: hidden;
}
.fadeIn {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
.fadeOut {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
And here's the JavaScript function I'm using:
function nextSlide() {
const carousel = document.getElementById('myCarousel');
const activeItem = carousel.querySelector('.carousel-item.active');
const nextItem = activeItem.nextElementSibling || carousel.querySelector('.carousel-item:first-child');
setTimeout(() => {
activeItem.classList.remove('active');
activeItem.classList.add("fadeOut");
activeItem.classList.remove("fadeIn");
nextItem.classList.add('active');
nextItem.classList.remove("fadeOut");
nextItem.classList.add("fadeIn")
}, 3000);
}