JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div id="cycler">
<img class="active" src="https://lh6.googleusercontent.com/-fhO80CE1q1w/AAAAAAAAAAI/AAAAAAAABQ8/UOruCVaAjcs/photo.jpg" alt="My image" /><img src="https://lh5.googleusercontent.com/-ZadaXoUTBfs/AAAAAAAAAAI/AAAAAAAAAAA/3rh5IMTHOzg/photo.jpg" alt="My image" /><img src="https://lh6.googleusercontent.com/-3kOmGsrZFj4/AAAAAAAAAAI/AAAAAAAAAAA/SC6-rNNRLm0/photo.jpg" alt="My image" /><img src="https://c2.staticflickr.com/4/3925/14613222335_a5486dee40.jpg" alt="My image" />
</div>

CSS

#cycler{position:relative;}
#cycler img{position:absolute;z-index:1}
#cycler img.active{z-index:3;transition: all 7s ease;}
#cycler{width: 500px;height :500px;overflow:hidden;}
#cycler img.active {transform:scale(1.1);}

JavaScript

setInterval((function fn() {
    var active = $('#cycler img.active');
    var next = (active.next().length > 0) ? active.next() : $('#cycler img:first');
    next.css('z-index',2);
    active.fadeOut(2000,'easeOutQuart',function(){
        active.css('z-index',1).show().removeClass('active');
        next.css('z-index',3).addClass('active');
    });
    return fn;
})(), 5000);