JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cycler">
     <img src="http://malsup.github.io/images/p1.jpg" class="active">
    <img src="http://malsup.github.io/images/p2.jpg">
    <img src="http://malsup.github.io/images/p3.jpg">
    <img src="http://malsup.github.io/images/p4.jpg">
 </div>

CSS

#cycler{position:relative;}
#cycler img{position:absolute;display:none; max-width:250px;}
#cycler img.active{z-index:3; display:block;}
#info {position: absolute; margin-top: 300px;}

JavaScript

function loop () {
    var randDelay = getRandomArbitary(5, 1000);
    var $active = $('#cycler .active');
    var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
    setTimeout(function(){ //this timeOut waits for 5 seconds before running fades
        $active.fadeOut();
        setTimeout( function(){ //I added a delay to the removeClass command, since it was interfering with the fadeOut 
            $active.removeClass('active');
        }, 500);
        setTimeout( function(){ //after waiting the random time + the delay mentioned earlier, the code runs the loop()-function again, starting with the 5 second pause
            $next.fadeIn().addClass('active');
            if (true) {
            loop();
        }
        }, randDelay + 500);
    }, 5000)
}

function getRandomArbitary ( ratio, factor ) {
    var randInterval = Math.floor(Math.random() * ratio);
    return randInterval * factor;
}

loop();