Bootstrap 5 Carousel: How to Smoothly Transition Between Non-Adjacent Slides Using Indicators

Problem Description:

I’m using Bootstrap 5 to implement a carousel with three slides, and I’ve encountered an issue when navigating between non-adjacent slides using the indicators. Specifically, when I try to go directly from the first slide to the third slide by clicking the corresponding indicator, I want the carousel to smoothly transition through the second slide rather than jumping directly to the third. However, the transitions are not smooth, and the slides either disappear momentarily or the transition gets stuck.

This is my code I have tried.

document.addEventListener('DOMContentLoaded', function() {
    var myCarousel = document.getElementById('carouselExampleIndicators');
    var carousel = new bootstrap.Carousel(myCarousel, {
        interval: false, // Disable automatic cycling
        wrap: false      // Prevent cycling from last to first slide automatically
    });

    myCarousel.addEventListener('slide.bs.carousel', function(event) {
        var currentIndex = event.from;
        var nextIndex = event.to;

        // If the user tries to go from the first slide directly to the third
        if ((currentIndex === 0 && nextIndex === 2) || (currentIndex === 2 && nextIndex === 0)) {
            event.preventDefault(); // Prevent the default slide

            // Move to the middle slide first
            carousel.to(1);

            // Wait for the transition to finish before moving to the final slide
            myCarousel.addEventListener('slid.bs.carousel', function() {
                // Immediately transition to the final destination
                carousel.to(nextIndex);
            }, { once: true }); // Use `once: true` to ensure this only runs once
        }
    });
});

<div class="container">
  <div id="carouselExampleIndicators" class="carousel slide">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://fastly.picsum.photos/id/758/500/200.jpg?hmac=ZpJtW1JQcdvAX5aOs3xN-A1to1naMgzT_QuOPShmuhs" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="https://fastly.picsum.photos/id/581/500/200.jpg?hmac=1wd_yrXA8qPktG3mqx5C1ZhTqIjgPmsXdoy1f-_xT2o" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="https://fastly.picsum.photos/id/221/500/200.jpg?hmac=taeeJWTKqW59XdSyKOzl6DI-W41lNSqjxwRq0_BzFMM" class="d-block w-100" alt="...">
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>

.carousel-item {
    transition: transform 1s ease-in-out;
}

.carousel-item.active {
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

.carousel-item-next,
.carousel-item-prev {
    opacity: 1;
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}