JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div class='pics' style="float:left;width:100px;height:100px;background-color:red"></div>
    <div class='pics' style="float:left;width:100px;height:100px;background-color:green"></div>
    <div class='pics' style="float:left;width:100px;height:100px;background-color:blue"></div>
    <div class='pics' style="float:left;width:100px;height:100px;background-color:orange"></div>
    <div class='pics' style="float:left;width:100px;height:100px;background-color:yellow"></div>
</div>

JavaScript

$(document).ready(function () {
    var arr = $('.pics')
    arr.hide();

    $(arr[0]).fadeIn(1500).delay(3500).fadeOut(1500);

    var index = 1;
    var maxIndex = arr.length - 1;

    setInterval(function () {
        /*arr.hide();
         var pic = $(arr[index]);
         pic.show();
         */
        var pic = $(arr[index]);
        pic.fadeIn(1500).delay(3500).fadeOut(1500);


        index++;
        if (index >= maxIndex) {
            index = 0;
        }
    }, 6500);

});