JSFiddle - React, Tailwind, and code Playground
HTML
<div id="myGallery">
<img src="https://cdn.dribbble.com/users/76761/screenshots/827372/time-and-money.gif" class="active" />
</div>
CSS
#myGallery{
position:relative;
width:300px; /* Set your image width */
height:220px; /* Set your image height */
}
#myGallery img{
display:none;
position:absolute;
top:0;
left:0;
}
#myGallery img.active{
display:block;
}
JavaScript
function swapImages() {
var $current = $('#myGallery img:visible');
var $next = $current.next();
if($next.length === 0) {
$next = $('#myGallery img:first');
}
$current.hide();
$next.show();
}
$(document).ready(function() {
// Run our swapImages() function every 5secs
setInterval('swapImages()', 500);
});