JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <img src="http://www.programfreaks.com/Images/Slider/pf0.png" style="width: 500px" id="slider"/>
</div>

JavaScript

var imgArr = [];
imgArr.push("http://www.programfreaks.com/Images/Slider/pf0.png");
imgArr.push("http://www.programfreaks.com/Images/Slider/pf1.png");
imgArr.push("http://www.programfreaks.com/Images/Slider/pf2.png");
imgArr.push("http://www.programfreaks.com/Images/Slider/pf3.png");
imgArr.push("http://www.programfreaks.com/Images/Slider/pf4.png");
imgArr.push("http://www.programfreaks.com/Images/Slider/pf5.png");
imgArr.push("http://www.programfreaks.com/Images/Slider/pf6.png");
var totalImages = imgArr.length;
var currIndex = 0;
function ChangeImage(elem)
{
    $("#"+elem).fadeOut(1000, function () {
        var img = imgArr[currIndex];
        $("#"+elem).attr("src",img);
        GetNewImage();
        $("#"+elem).fadeIn(1000);
    });
    
}
                        
function GetNewImage()
{
    var newIndex = (currIndex + 1)%totalImages;
    currIndex = newIndex;
}

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
    });
}

                        
$(function() {
    preload(imgArr);
    var interval = setInterval(function () {ChangeImage("slider");}, 5500);
});