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;}

JavaScript

var myVar = setInterval(function(){myTimer()}, 5000);

function myTimer() {
    var $active = $('#cycler .active');
    var $next = ($active.next().length > 0) 
        ? $active.next() 
        : $('#cycler img:first')
    ;
    $active.fadeOut().removeClass('active');
    var randDelay = getRandomArbitary(5, 1000);
    setTimeout( function(){
        $next.fadeIn().addClass('active');
    }, randDelay);
}

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