JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <meta charset='utf-8'/>
        <title></title>
    </head>
 
    <body>
        <div id='content'>
            <img id="slideshow" />
        </div>
 
      
    </body>
</html>

CSS

#slideshow {
    background:gray;
    width:800px;
    height: 600px;
}

JavaScript

var pictures = [
        "http://melastardu13.m.e.pic.centerblog.net/1ccd538b.jpg",
        "http://melastardu13.m.e.pic.centerblog.net/f588adc7.jpg",
        "http://melastardu13.m.e.pic.centerblog.net/a9fa710f.jpg"
    ];
    var img = document.getElementById("slideshow");
    var currentIndex = 0;
    var slideshowTimer;
    
    (function nextImg(){        
        slideshowTimer = Date.now();
        img.src=pictures[currentIndex];
        img.onload=function(){
            currentIndex = (currentIndex + 1) % pictures.length;
            var remainingTime = 2000 - (Date.now() - slideshowTimer);
            if(remainingTime>0){ setTimeout(nextImg, remainingTime); }
            else { nextImg(); }
        };        
    })();