JSFiddle - React, Tailwind, and code Playground

by Tony Chen

HTML

<body>
<div id="slider">
<img id="1" src="http://tony77.com/others/11.jpg" />
<img id="2" src="http://tony77.com/others/22.jpg" />
<img id="3" src="http://tony77.com/others/33.jpg" />
<img id="4" src="http://tony77.com/others/44.jpg" />
</div>
</body>

CSS

img{ position:absolute;  display:none;}

JavaScript

sliderInt=1;
sliderNext=2;
$(document).ready(function(){
  $("#slider>img#1").fadeIn(3000);
    startSlider();
});
function startSlider(){
    count=$("#slider>img").size();
    loop=setInterval(function(){
        if(sliderNext>count){
            sliderNext=1;
            sliderInt=1;
        }
		$("#slider>img").fadeOut(2000);
        $("#slider>img#"+sliderNext).fadeIn(2000);

        sliderInt=sliderNext;
        sliderNext=sliderNext+1;
    },5000);
}