JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider"></div>

CSS

#slider {
  width: 450px;
  height: 200px;
  transition: 1s;
}

JavaScript

var colors = ['http://i.dailymail.co.uk/i/pix/2005/12/merkelL091205_450x200.jpg', 
'green', 'blue', 'gray', 'orange'],
		delays = [1000, 2000, 3000, 4000],
    i = 0;

(function foo() {
  slider.style.backgroundImage = 'url(colors)'[i++ % colors.length];

  setTimeout(foo, delays[~~(Math.random() * delays.length)]);
})();