JSFiddle - React, Tailwind, and code Playground

HTML

<div id="SlideShow" >
    <img id="img" src="http://www.image-upload.net/di/WMPI/img.jpg" alt="" />
    <span id="desc"></span>
</div>

CSS

body{
   background-color: #7F7E7E; 
}
#SlideShow {
   border: 1px solid #fff;
   width: 600px;
   padding: 5px;
   background-color: #fff;
}
#desc{
   color: #000;
   background-color: #fff;
}

JavaScript

var meToo = {
     Images: ['http://www.image-upload.net/di/WMPI/img.jpg','http://www.image-upload.net/di/HPUQ/img2.jpg','http://www.image-upload.net/di/WQ9J/img3.jpg','http://www.image-upload.net/di/GIM6/img4.jpg','http://www.image-upload.net/di/0738/img5.jpg'],
    Titles: ['Pic1','pic2','Pic3','Pic4','Pic5'],
    counter: 0,
    Play: function(ElemID){
        var element = document.getElementById(ElemID);
        var ImgLen = this.Images.length;
        
        if(this.counter < ImgLen){
            this.counter++;
            element.src = this.Images[this.counter];
            element.nextSibling.innerHTML = this.Titles[this.counter];
        }else{
            this.counter = 0;
        }
        setTimeout(this.Play, 1000);        
    }     
 };

meToo.Play('img');