JSFiddle - React, Tailwind, and code Playground

HTML

<button class="btn-next">next</button>

<div class="carousel">
    <div class="carousel-list">
        <div class="carousel-item mf-front">
            <img src="http://www.sunhome.ru/UsersGallery/wallpapers/33/3142307.jpg">
        </div>
        <div class="carousel-item">
            <img src="http://www.sunhome.ru/UsersGallery/wallpapers/33/3141858.jpg">
        </div>
        <div class="carousel-item">
            <img src="http://www.sunhome.ru/UsersGallery/wallpapers/33/3141433.jpg">
        </div>
    </div>
</div>

CSS

.carousel {
    margin-top: 20px;
}

.carousel-list {
    position: relative;
    padding-top: 50%;
}

.carousel-item {
    display: block !important;
    visibility: hidden;
    
    position: absolute;
    top: 0;       left: 0;
    bottom: 0;    right: 0;
}

.carousel-item img {
    max-width: 100%;
    max-height: 100%;
}

.carousel-item.mf-front,
.carousel-item.mf-back {
    visibility: visible;
}

.carousel-item.mf-front {
    z-index: 1;
}

JavaScript

var changeItem = function(direction) {
    
    var currItem = $('.mf-front'),
        nextFront,
        nextBack;
    
    if (direction === 'next') {
        
        if (currItem.next().length) nextFront = currItem.next()
        else nextFront = currItem.siblings().eq(0)
        
        if (nextFront.next().length) nextBack = nextFront.next()
        else nextBack = currItem.siblings().eq(0)
        
    }
    
    nextFront.addClass('mf-back');
    
    currItem.fadeOut(500, function() {
        currItem.removeClass('mf-front');
        nextFront.addClass('mf-front').removeClass('mf-back');
        nextBack.addClass('mf-back'); 
    });

};

$('.btn-next').on('click', function() {

    changeItem('next');
    
});