JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div class="fader">
    
    <img src="http://hk5h1jrb20jxth2s0b2jfj.wpengine.netdna-cdn.com/wp-content/uploads/2015/07/cat-300572_640.jpg" />
    <img src="https://www.petfinder.com/wp-content/uploads/2012/11/100691619-what-is-cat-fostering-632x475.jpg" />
    <img src="http://i.livescience.com/images/i/000/077/669/i02/cat-eyes.jpg?1438963039" />
    
</div>

CSS

.fader img {
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 400px;
  height: 400px;
}

JavaScript

setInterval(function(){
   
    $('.fader').children().first().hide().appendTo($('.fader')).fadeIn(1000);
     
}, 1000);