JSFiddle - React, Tailwind, and code Playground

HTML

<div id="carousel_wrapper">
    <ul>
        <li>
            <div>0</div>
        </li>
        <li>
            <div>1</div>
        </li>
        <li>
            <div>2</div>
        </li>
        <li>
            <div>3</div>
        </li>
        <li>
            <div>4</div>
        </li>
        <li>
            <div>5</div>
        </li>
        <li>
            <div>6</div>
        </li>
        <li>
            <div>7</div>
        </li>
    </ul>
</div>

<div id="buttons">
    <button id="left">left</button>
    <button id="right">right</button>
</div>

CSS

div#carousel_wrapper{

    overflow:hidden;
    position:relative;
    width:500px;
    height: 100px;
}

ul {
    padding:0px;
    margin:0px;
    position: absolute;
    top:50px;
    left: 0px;
    width:200px;
    height: 50px;
    overflow: hidden;
}
ul li {
    list-style:none;
    float:left;
}
ul li div {
    border:1px solid white;
    width:200px;
    height:50px;
    background-color:gray;
}

JavaScript

var container = $("#carousel_wrapper");
    
    var runner = container.find('ul');
    var liWidth = runner.find('li:first').outerWidth();
    var itemsPerPage = 3;
    var noofitems = runner.find('li').length;
    
    runner.width(noofitems * liWidth);
    container.width(itemsPerPage*liWidth);

    $('#right').click(function() {
        $( runner ).animate({ "left": "-=51px" }, "slow" );
    });
    
    
    $('#left').click(function() {
        $( runner ).animate({ "left": "+=51px" }, "slow" );
    });