JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="visible-area">
        <div class="slider"> <a href="#"><img src="images/1.jpg" width="800" height="300" alt="1"/></a>
 <a href="#"><img src="images/2.jpg" width="800" height="300" alt="2"/></a>
 <a href="#"><img src="images/3.jpg" width="800" height="300" alt="3"/></a>
 <a href="#"><img src="images/4.jpg" width="800" height="300" alt="4"/></a>

        </div>
    </div> <a href="#" class="previous">Previous</a>
 <a href="#" class="next">Next</a>

    <div class="clear"></div>
</div>

CSS

.wrapper {
        width: 800px;
        position: relative;
        margin: 20px auto;
    }
    .visible-area {
        width: 800px;
        height: 300px;
        overflow: hidden;
        position: relative;
    }
    .slider {
        position: absolute;
        top: 0;
        left: 0;
    }
    .slider img {
        float: left;
    }
    .previous {
        width: 100px;
        float: left;
        color: #fff;
        height: 30px;
        margin-top: 10px;
        background: #f00;
        line-height: 28px;
        text-align: center;
        text-decoration: none;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
    .next {
        width: 100px;
        float: right;
        color: #fff;
        height: 30px;
        margin-top: 10px;
        background: #f00;
        line-height: 28px;
        text-align: center;
        text-decoration: none;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
    .clear {
        clear: both;
    }

JavaScript

$('.slider img:first').addClass('active'); 

    var imagewidth = $('.visible-area').width();
    var totalimages = $('.slider img').size(); 
    var sliderwidth = imagewidth * totalimages; 

    $('.slider').css({'width': sliderwidth}); 

    $('.next').click(function () {
     
        var $active = $('.slider img.active').parent().next().find('img'); 

        if ($active.length == 0) {  
            $active = $('.slider img:first');
        }

        $('.slider img').removeClass('active');
        $active.addClass('active'); 
        var count = $active.attr('alt') - 1;
        
        var sliderposition = count * imagewidth; 
        $('.slider').animate({
            left: -sliderposition
        }, 5000); 
    });