JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="4200" data-bs-pause="hover">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://placehold.co/2560x720?text=Slide1" class="img-fluid">
    </div>
    <div class="carousel-item">
      <img src="https://placehold.co/2560x720?text=Slide2" class="img-fluid">
    </div>
    <div class="carousel-item">
      <img src="https://placehold.co/2560x720?text=Slide3" class="img-fluid">
    </div>
  </div>
  <button class="carousel-control-prev" 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" 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>

CSS

/* 0 second trans delay, .6 second trans duration on opacity fade out. */
#myCarousel .active.carousel-item-end, 
#myCarousel .active.carousel-item-start {
  transition-duration: 600ms;
  transition-delay: 0ms;
}

/* .6 second trans delay, .6 second trans duration on opacity fade in. */
#myCarousel .carousel-item-next, 
#myCarousel .carousel-item-prev {
  transition-duration: 600ms;
  transition-delay: 600ms;
}

/* 1.2 seconds (1200 milliseconds) in total of transition delay and duration in my css above.
If you modify this you need to adjust your data-bs-interval time if your running auto data-bs-ride. */

JavaScript

/* const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {

  console.clear();

  console.log(event.direction, event.relatedTarget, event.from, event.to);

}); */