JSFiddle - React, Tailwind, and code Playground

by blackhawx

HTML

<div id="images">
<img src="image1.jpg" alt="image1" class="current"/>
<img src="image2.jpg" alt="image2"  />
<img src="image3.jpg" alt="image3" />
<img src="image4.jpg" alt="image4" /></div>
<div class="click">
    <a id="1">Image 1</a>
    <a id="2">Image 2</a>
    <a id="3">Image 3</a>
    <a id="4">Image 4</a>
</div>

CSS

#images{
position:relative;
display:block;
height: 450px;
}
#images img{
position:absolute;
}
img.current{
z-index:100;

}
img.next{
z-index:99;
}

JavaScript

function(){
var timing=3000 ;
var currentImg ;
var nextImg ;
setInterval(rotateImages,timing);

function rotateImages(){

    currentImg=$(".current"); 
    nextImg=currentImg.next() ;

    if(nextImg.length==0){ 
        nextImg=$("#images img:first") ; 
        } 

currentImg.removeClass("current").addClass("next") ; 

nextImg.addClass("current").css({opacity:0}).animate({opacity:1},timing/2,function(         ){currentImg.removeClass("next") ;
    }); 
    }