JSFiddle - React, Tailwind, and code Playground

HTML

<div class="viewport">
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
   <div class="item">4</div>
</div>
<div>
    <button class="prev-item">prev</button>
    <button class="next-item">next</button>
</div>

CSS

.viewport, .item {
    width: 300px;
    height: 200px;
    background-color: #808080;
}
.viewport {
    position: relative;
    overflow: hidden;
}
.item {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    color: #FFFFFF;
}

JavaScript

$(function() {
    var currentItem = $('.viewport .item:first').show();

    var getNextItem = function() {
        var nextItem = currentItem.next('.item');
        if (nextItem.length == 0) {
            nextItem = $('.viewport .item:first'); 
        }
        return nextItem;
    };
    
    var getPrevItem = function() {
        var prevItem = currentItem.prev('.item');
        if (prevItem.length == 0) {
            prevItem = $('.viewport .item:last');
        }
        return prevItem;
    };    
    
    $('.prev-item').click(function() {
        var viewportWidth = $('.viewport').width();
        
        currentItem.animate({
            left: viewportWidth+'px'
        }, 500, function() {
            $(this).hide();
        });
        
        currentItem = getPrevItem().show().css({
            left: '-'+viewportWidth+'px' 
        }).animate({
            left: '0px'
        }, 500);
        
        return false;
    });    
    
    $('.next-item').click(function() {
        var viewportWidth = $('.viewport').width();
        
        currentItem.animate({
            left: '-'+viewportWidth+'px'
        }, 500, function() {
            $(this).hide();
        });
        
        currentItem = getNextItem().show().css({
            left: viewportWidth+'px' 
        }).animate({
            left: '0px'
        }, 500);
        
        return false;
    });
});