JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider">
   <div class="container">
     <div class="slides">
        <div class="slide slide1 active"></div>
        <div class="slide slide2"></div>
        <div class="slide slide3"></div>
        <div class="slide slide4"></div>
        <div class="slide slide5"></div>
     </div>
   </div>
</div>

CSS

.container {
    width: 300px;
    height: 300px;
}

.slide {
    opacity:0 ;
    width: 100px;
    height: 100px;
}
.slide1 { background: green; }
.slide2 { background: red; }
.slide3 { background: blue; }
.slide4 { background: orange; }
.slide5 { background: purple; }

.slide.active {
    opacity: 1;
}

JavaScript

var i = 1;
$slides = $('.slides > .slide');
$num = $slides.length;

setInterval(function() {
    
    if (i++ == $num) {
           $('.slide').removeClass('active');
           $($slides[0]).addClass('active');
        i = 1;
    }
    else {
        $('.active').removeClass("active").next().addClass('active');
    }
                          
    
}, 1000);