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 = 0;
        }
        element.src = this.Images[this.counter];
        element.nextSibling.innerHTML = this.Titles[this.counter];
        this.counter++;

        var _this = this;
        setTimeout(function() {
            _this.Play('img')
        }, 1000);
    }
};

meToo.Play('img');