JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myGallery">
  <img src="http://www.google.co.za/logos/2012/fencing-2012-sr.png" class="active" />
  <img src="http://docj27ko03fnu.cloudfront.net/rel/img/f4ab856b100c2fe593d988449783c99d.png" />
  <img src="http://www.google.co.za/logos/2012/fencing-2012-sr.png" />
</div>

CSS

#myGallery{
  position:relative;
  width:400px; /* Set your image width */
  height:300px; /* Set your image height */
}
#myGallery img{
  display:none;
  position:absolute;
  top:0;
  left:0;
}
#myGallery img.active{
  display:block;
}

JavaScript

function swapImages(){
  var $active = $('#myGallery .active');
  var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
  $active.fadeOut(function(){
    $active.removeClass('active');
    $next.fadeIn().addClass('active');
  });
}
setInterval('swapImages()', 1000);