JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mslider1 mslider">
     SLIDER 1
</div>
<div class="mslider2 mslider">
    SLIDER 2
</div>
<div class="mslider3 mslider">
     SLIDER 3
</div>
<div class="mslider4 mslider">
     SLIDER 4
</div>
<div class="mslider5 mslider">
    SLIDER 5
</div>

CSS

.mslider{
  display:none;
}

.mslider1{
  display:block;
}

JavaScript

$(document).ready(function() {
    timeout();
});

var count = 1;
function timeout() {
   
   setTimeout(function(){
       $(‘.mslider’).hide();
       $(‘.mslider’+count).show();
       count ++;
       
       if(count == 6) {
           count = 1;
       }

       timeout();
     }, 1000);
}