JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fader">
  <ul>
    <li><img src="http://placehold.it/500x500/220022?text=1"></li>
    <li><img src="http://placehold.it/500x500/002200?text=2"></li>
    <li><img src="http://placehold.it/500x500/0000FF?text=3"></li>
  </ul>
</div>

<script>
  $(function() {
    $(".fader").fader({
      delay: 2000
    })
  });

</script>

CSS

html,
body,
.fader {
  height: 100%;
}

.fader ul {
  position: relative;
}

.fader img {
  position: absolute;
  top: 0px;
  left: 0px;
}

JavaScript

(function($) {
  $.fn.fader = function(options) {
    var settings = $.extend({
      delay: 2000
    }, options);

    $(this).addClass("clearfix").css("overflow", "hidden");
    $(this).find('ul').addClass("clearfix").css("padding", "0px");

    /**
     * Fades out element `toFade`, fading in `toFade+1`
     * If `toFade` is the last element, then the first element will be
     * faded in.
     *
     * @param {Integer} toFade which element to fade out
     * @param {Array} imgs array of jQuery elements
     */
    function fade(toFade, imgs) {
      settings.delay = (6000 * Math.random() | 0) + 2000;
      var toShow = toFade === (imgs.length - 1) ? 0 : toFade + 1;
      imgs[toShow].animate({
        opacity: 1
      }, settings.delay / 2);
      setTimeout(function() {
        fade(toShow, imgs);
      }, settings.delay);
    }

    // find images, and hide them
    var imgs = [];
    $(this).find('ul li').each(function() {
      imgs.push($(this));
      $(this).css({
        opacity: 0
      });
    });

    // show the first image, and set a timer to fade it
    imgs[0].css({
      opacity: 1
    });
    setTimeout(function() {
      fade(0, imgs);
    }, options.delay / 2);
  };

}(jQuery));