JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="imgrotator">
<div class="imgrotator-item" data-src="https://dummyimage.com/300x200/777/fff&text=1"></div>
<div class="imgrotator-item" data-src="https://dummyimage.com/300x200/777/fff&text=2"></div>
<div class="imgrotator-item" data-src="https://dummyimage.com/300x200/777/fff&text=3"></div>
<div class="imgrotator-item" data-src="https://dummyimage.com/300x200/777/fff&text=4"></div>
<div class="imgrotator-item" data-src="https://dummyimage.com/300x200/777/fff&text=5"></div>
<div class="imgrotator-item" data-src="https://dummyimage.com/300x200/777/fff&text=6"></div>
</div>
CSS
.imgrotator {
display: none;
}
JavaScript
function rotateImages(rotatorImage, tHandleInterval) {
var current = $('.imgrotator .imgrotator-item.current');
if ( ! current.length ) current = $('.imgrotator .imgrotator-item').first();
current.removeClass('current');
if ( current.next().length ) {
rotatorImage.attr('src', current.next().data('src'));
current.next().addClass('current');
}
else
window.clearInterval(tHandleInterval);
}
function initRotateImages() {
var rotatorImage = $('<img class="imgrotator-image">').attr('src', $('.imgrotator .imgrotator-item').first().addClass('current').data('src'));
rotatorImage.insertAfter('.imgrotator');
var tHandleInterval = window.setInterval( function() {
rotateImages(rotatorImage, tHandleInterval);
}, 1000);
}
$(document).ready( function() {
initRotateImages();
});