JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left">Prev</div>
<ul>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
    <li>Test 5</li>
    <li>Test 6</li>
    <li>Test 7</li>
    <li>Test 8</li>
    <li>Test 9</li>
    <li>Test 10</li>
</ul>
<div id="right">Next</div>

CSS

ul{
    height: 105px;
    width: 770px;
    overflow:hidden;
    margin: 0 auto;
    border: 1px solid red;
}
ul li{
    border: 1px solid gray;
    float: left;
    height: 100px;
    margin: 0 17px 22px;
    width: 155px;
}
#left,#right{
    cursor: pointer;
}

JavaScript

var total = $('ul li').length;
var start = 0;
var count = 4;

update = function() {
    for (var i = 0; i < total; i++) {
        el = $("ul li").eq(i);
        if (i >= start && i < start + count)
            el.show(400);
        else
            el.hide(400).remove();

    }
}

$("#right").click(function() {
    start += count;
    if (start >= total)
        start = 0;
    update();
});

$("#left").click(function() {
    start -= count;
    if (start < 0)
        start = Math.floor(total / count) * count;
    update();
});