JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="ttps://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 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>

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;
}