JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">

</div>

CSS

#container {position:relative;margin:25px;}
#container img {position:absolute;top:0;left:0;border:1px solid #7f7f7f;display: none;}

JavaScript

var SlideShow = function(containerId, images, config) {
    
    var _defaults = {
        fadeSpeed : 2000,
        showTime: 5000
    };
    
    this.config = $.extend(_defaults, config);
    
    this.images = images;
    this.containerId = containerId;
    
    this.imgCount = this.images.length;
    this.currentImg = 0;
    this.currentImgHolder = 0;
    
    $("#" + this.containerId).append("<img/><img/>");
};

SlideShow.prototype.next = function() {
    
	if(this.currentImgHolder == 2) {this.currentImgHolder = 0;}
	if(this.currentImg == this.imgCount ) {this.currentImg = 0;}
    
    $('#' + this.containerId + ' > img')
        .eq(this.currentImgHolder)
            .fadeIn(this.config.fadeSpeed)
	        .attr('src', this.images[this.currentImg])
            .siblings()
                .fadeOut(this.config.fadeSpeed);
    
	this.currentImg++;
    this.currentImgHolder++;
    
    var _self = this;
    setTimeout(function() {
            _self.next();
    }, this.config.showTime);
};

var imgArray = [
    'https://lh4.googleusercontent.com/-JEFd9Bn2cqs/UT9-DaM_wpI/AAAAAAAAA4w/GZ3jVIEpUQ8/s800/image1.jpg'
    ,'https://lh5.googleusercontent.com/-dXG0cK9UdSs/UT9-DaogYgI/AAAAAAAAA4w/8WD2xminsoM/s800/image2.jpg'
    ,'https://lh4.googleusercontent.com/-If4lCQE7lAs/UT9-DTeH4YI/AAAAAAAAA4w/a1Z3fXMlQBA/s800/image3.jpg'
    ];

var slide = new SlideShow('container', imgArray, {
    fadeSpeed: 1500,
    showTime: 3000
});
slide.next();