JSFiddle - React, Tailwind, and code Playground

HTML

<img id="slider" src="http://placehold.it/50x200">

CSS

#slider {
    opacity:1;
    transition: opacity 1s; 
}

#slider.fadeOut {
    opacity:0;
}

JavaScript

var imgArray = [
    'http://placehold.it/300x200',
    'http://placehold.it/200x100',
    'http://placehold.it/400x300'],
    curIndex = 0;
    imgDuration = 3000;

function slideShow() {
    document.getElementById('slider').className += "fadeOut";
    setTimeout(function() {
        document.getElementById('slider').src = imgArray[curIndex];
        document.getElementById('slider').className = "";
    },1000);
    curIndex++;
    if (curIndex == imgArray.length) { curIndex = 0; }
    setTimeout(slideShow, imgDuration);
}
slideShow();