JSFiddle - React, Tailwind, and code Playground

by CarambaMoreno

HTML

<div id="carousel-1" class="carousel slide">
    <div class="carousel-innner">
        <div class="item active">
            1
        </div>
        <div class="item">
            2
        </div>
    </div>        
</div>

<div id="carousel-2" class="carousel slide">
    <div class="carousel-innner">
        <div class="item active">
            1
        </div>
        <div class="item">
            2
        </div>
    </div>
</div>
<div id="carousel-3" class="carousel slide">
    <div class="carousel-innner">
        <div class="item active">
            1
        </div>
        <div class="item">
            2
        </div>
    </div>
</div>

CSS

.carousel {
  position:relative;
  margin-bottom:18px;
  line-height:1;
}
.carousel-inner {
  overflow:hidden;
  width:100%;
  position:relative;
}
.carousel .item {
  display:none;
  position:relative;
  -webkit-transition:.6s ease-in-out left;
  -moz-transition:.6s ease-in-out left;
  -ms-transition:.6s ease-in-out left;
  -o-transition:.6s ease-in-out left;
  transition:.6s ease-in-out left;
}
.carousel .item > img {
  display:block;
  line-height:1;
}
.carousel .active, .carousel .next, .carousel .prev { display:block; }
.carousel .active { left:0; }
.carousel .next, .carousel .prev {
  position:absolute;
  top:0;
  width:100%;
}
.carousel .next { left:100%; }
.carousel .prev { left:-100%; }
.carousel .next.left, .carousel .prev.right { left:0; }
.carousel .active.left { left:-100%; }
.carousel .active.right { left:100%; }
.carousel-control {
  position:absolute;
  top:40%;
  left:15px;
  width:40px;
  height:40px;
  margin-top:-20px;
  font-size:60px;
  font-weight:100;
  line-height:30px;
  color:#ffffff;
  text-align:center;
  background:#222222;
  border:3px solid #ffffff;
  -webkit-border-radius:23px;
  -moz-border-radius:23px;
  border-radius:23px;
  opacity:0.5;
  filter:alpha(opacity=50);
}
.carousel-control.right {
  left:auto;
  right:15px;
}
.carousel-control:hover {
  color:#ffffff;
  text-decoration:none;
  opacity:0.9;
  filter:alpha(opacity=90);
}
.carousel-caption {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:10px 15px 5px;
  background:#333333;
  background:rgba(0,0,0,0.75);
}
.carousel-caption h4, .carousel-caption p { color:#ffffff; }

JavaScript

$(document).ready(function() {
    $('.carousel').each(function(){
        $('#carousel-2').carousel({
            interval: 2000
        });
        $('#carousel-3').carousel({
            interval: 1000
        });
        $(this).carousel({
            interval: 3000
        });
      });
});