JSFiddle - React, Tailwind, and code Playground

HTML

<body onload='getAllListItems()'>
    <div id='t'></div>
    <button id='left' onClick="move(left)">
        <</button>
           
                <ul id='list-items'>
                    
                </ul>
         
            <button id='right' onClick='move(right)'>></button>
</body>

CSS

* {
    box-sizing: border-box;
}
ul {
    float:left;
    height:50px;
    width: 600px;
    overflow: hidden;
}
ul li {
    text-align: center;
    border: 2px solid black;
    width: 100px;
    height: 50px;
    float: left;
    list-style-type: none;
    background-color: aquamarine;
}
ul li:first-child {
    display: block;
}
#left, #right {
    float:left;
    height:50px;
    background-color:aqua;
    font-size:2em;
    padding-left: 20px;
    padding-right:20px;
}

JavaScript

$(document).ready(function(){
    var code='';
    for(var i=1;i<=20;i++)
    {
        code+="<li>list Item "+i+"</li>";
    }
    $('#list-items').html(code);        
        
});


var list_items = [];
var index = 0;
var list_length = 0;

function getAllListItems() {
    var temp = document.getElementsByTagName('li');

    for (i = 0; i < temp.length; i++) {
        list_items.push(temp[i]);
    }

    list_length = temp.length;
}

getAllListItems();

function move(dir) {


    if (dir == left) {
        $(list_items[index]).show("slow");
        index--;

        if (index < 0) {
            index = 0;
        }
    } else if (dir == right) {

        $(list_items[index]).hide("slow");

        if (index >= ((list_length) - 1)) {
            index = (list_length) - 1;
        } else {
            index++;
        }
    } else {}
}