JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div id="container">
      <a href="#"><img src="http://duvaleimoveis.com.br/admin/dest/thumb.php?img=fotos/3a8d87a624cfd7dc68bcbd1c2d45ebee.jpg"/></a>

      <a href="#"><img src="http://duvaleimoveis.com.br/admin/dest/thumb.php?img=fotos/f15d8f97b154858f411c17ef999ae5ab.jpg"/></a>
      
  </div>
</div>

CSS

*{margin:0;padding:0;}
.cf:before,.cf:after{content:"";display:table;}
.cf:after{clear:both;}

#container
{
    position: relative;
    height: 400px;
    overflow: hidden;
}

#container >  a
{
    position: absolute;
    left: 0;
    top: 0;
}

JavaScript

$(document).ready(function(){
    var container = $("#container");
    var height = container.height();
	var children = container.children();
    var len = children.size();
    var i = 0;
    
    children.each(function(i,e){$(e).css('z-index', len - i);});
    
    var animate = function()
    {
        var img = children.eq(i);
        var prev = i == 0 ? children.eq(len - 1) : children.eq(i - 1);
        prev.css('opacity', 1);
        i = i == len - 1 ? 0 : i + 1;
        var next = children.eq(i);
        var top = img.height() - height;
        img.css('z-index', len);
        next.css('z-index', len - 1);
        next.css('opacity', 1);
        next.show();
        img.animate({top: -top}, 2000, "swing", function(){
        	img.fadeOut(1000, function() {
            	img.css('z-index', 0);
                img.css('top', 0);
                animate();
            }); 
        });
    }
    
    animate();
});