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');
      $next.delay(getRandomArbitary(5,20)*1000).fadeIn().addClass('active');
}

function getRandomArbitary (min, max) {
    return Math.random() * (max - min) + min;
}