JSFiddle - React, Tailwind, and code Playground

by troythompson

HTML

<div id="slider-container">
    <div class="slide active black"></div>
    <div class="slide blue"></div>
    <div class="slide green"></div>
    <div class="slide red"></div>
</div>

CSS

#slider-container{
    width:300px;
    height:200px;
    position:relative;
}
.slide{
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;
    z-index:1;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
.active{
    opacity:1;
    z-index:2;
}
.blue{
    background:#00f;
}
.black{
    background:#000;
}
.green{
    background:#0f0;
}
.red{
    background:#f00;
}

JavaScript

var rotateBg = setInterval(function(){
  var slideIndex = $(".slide.active").index();
    if(slideIndex == 3){
        var nextIndex = 0;
    } else {
        var nextIndex = slideIndex + 1;   
    }
  
  $(".slide.active").removeClass("active");
  $(".slide").eq(nextIndex).addClass("active");
}, 2000);