JSFiddle - React, Tailwind, and code Playground

by Denis Ineshin

HTML

<div class="slider">
    <div class="slide" style="background: red;"></div>
    <div class="slide" style="background: green;"></div>
    <div class="slide" style="background: blue;"></div>
    <div class="slide" style="background: yellow;"></div>
    <div class="slide" style="background: orange;"></div>
</div>

CSS

.slider {
    position: relative;
    width: 500px; height: 300px;
    background: #000;
}
.slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    
-webkit-transition: all 1500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
   -moz-transition: all 1500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
     -o-transition: all 1500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
        transition: all 1500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */

-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
   -moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
     -o-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
}

.slide.active {
    opacity: 1;
}

JavaScript

var $slider = $(".slider"),
    $slides = $slider.find(".slide"),
    total = $slides.length,
    current = 0;

$slides.eq(0).addClass("active");

setInterval(function () {
    current++;
    if (current > total - 1) {
        current = 0;
    }
    
    $slides.eq(current).addClass("active").siblings().removeClass("active");
}, 3000);