JSFiddle - React, Tailwind, and code Playground

by Yonas Hailu

HTML

<div id="slideshow"></div>

CSS

#slideshow {
    border: 1px solid gray;
    height: 330px;
    width: 592px;
}

JavaScript

$(document).ready(function() {
    var timeToDisplay = 2000;

    var slideshow = $('#slideshow');
    var urls = [
       'http://sipi.usc.edu/database/preview/aerials/2.1.07.png',
       'http://sipi.usc.edu/database/preview/aerials/2.1.06.png',
       'http://sipi.usc.edu/database/preview/aerials/2.1.12.png'
    ];

    var index = 0;
    var transition = function() {
        var url = urls[index];

        slideshow.css('background-image', 'url(' + url + ')');

        index = index + 1;
        if (index > urls.length - 1) {
            index = 0;
        }
    };
    
    var run = function() {
        transition();
        slideshow.fadeIn('slow', function() {
            setTimeout(function() {
                slideshow.fadeIn('slow', run);
            }, timeToDisplay);
        });
    }
        
    run();
});