JSFiddle - React, Tailwind, and code Playground
HTML
<div id="homeimg">
<img src="http://placehold.it/150/ff00ff&text=1"/>
<img src="http://placehold.it/150/ccaaff&text=2" style="display:none" />
</div>
CSS
img {
position:absolute;
}
JavaScript
$(document).ready(function () {
$('#homeimg img:first-child').addClass('activeimg');
setInterval(cycleMe, 4000);
// get an array of your images
var arrImgs = $('#homeimg img');
function cycleMe() {
var currImg = $(arrImgs[0]);
var nextImg = $(arrImgs[1]);
// You can do this with simple array splicing and pushing
nextImg.fadeIn(1500);
currImg.fadeOut(1500, function () {
currImg.removeClass('activeimg');
nextImg.fadeIn(0).addClass('activeimg');
// remove the first item from the array
arrImgs.splice(0,1);
// add it to the end of the array
arrImgs.push(currImg);
});
}
});