JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<div class="map" style="background-color: blue"></div>
<div class="map" style="background-color: yellow"></div>
<div class="map" style="background-color: red"></div>
<div class="map" style="background-color: green"></div>

CSS

.map {
    height: 100px;
    width: 100px;
    position: absolute;
}

JavaScript

$(document).ready(function(){
    var items = $(".map");
    var visibleIndex = 0;
    items.css("opacity", 0);
    items.eq(0).css("opacity", 1);
    
    function next() {
        // fade out the currently visible item
        items.eq(visibleIndex).fadeTo(1000, 0, function() {
            // at the same time, fade in the next item
            visibleIndex = ++visibleIndex % items.length;
            items.eq(visibleIndex).fadeTo(1000, 1, function() {
                 setTimeout(next, 1000);
            });
        });
    }
    
    next();
});