JSFiddle - React, Tailwind, and code Playground

HTML

<button id="leftArrow" class="fbtnFirst">Left</button>
<button id="rightArrow" class="fbtnLast">Right</button>
<button id="resetBtn" class="fbtnReset">Reset</button>
<br /><br />
<div id="itemsListBox">
    <ul id="slider">
        <li>
            <img src="http://www.kids-pages.com/folders/alphabet/A/Letter-AThumb.jpg" border="1" />
        </li>
        <li>
            <img src="http://www.kids-pages.com/folders/alphabet/B/Letter-BThumb.jpg" border="1" />
        </li>
        <li>
            <img src="http://www.kids-pages.com/folders/alphabet/C/Letter-CThumb.jpg" border="1">
        </li>
        <li>
            <img src="http://www.kids-pages.com/folders/alphabet/D/Letter-DThumb.jpg" border="1" />
        </li>
        <li>
            <img src="http://www.kids-pages.com/folders/alphabet/E/Letter-EThumb.jpg" border="1" />
        </li>
        <li>
            <img src="http://www.kids-pages.com/folders/alphabet/F/Letter-FThumb.jpg" border="1" />
        </li>
        <li>
            <img src="http://www.kids-pages.com/folders/alphabet/G/Letter-GThumb.jpg" border="1" />
        </li>
        <li>
            <img src="http://www.kids-pages.com/folders/alphabet/H/Letter-HThumb.jpg" border="1" />
        </li>
    </ul>
</div>

CSS

#itemsListBox {
    position: relative;
    height: 120px; width: 304px;
    overflow: hidden;
    border: 1px solid gray;
}
#itemsListBox ul {
    list-style: none;
    position: absolute;
    top: 0; left: 0;
    height: 100%; width: 200%;
    margin: 0; padding: 0;
    white-space: nowrap;
    border: 1px solid silver;
}
#itemsListBox ul li {
    display: inline-block;
    height: 100%; width: auto;
    margin: 0 16px 0 0px;
}
#itemsListBox ul li img {
    width: 80px;
}

JavaScript

$('#leftArrow').on("click", function() {
    $('#slider').animate({left: "-=288"}, 500);
});

$('#rightArrow').on("click", function() {
    $('#slider').animate({left: "+=288"}, 500);
});

$('#resetBtn').on("click", function() {
    $('#slider').animate({left: "0"}, 500);
});