JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
</li>
    
    <button id="prev">Previous</button>
    <button id="next">Next</button>

CSS

li { display: inline-block; width: 500px; border: 1px solid black; }
body { width: 5000px; }

#prev {position: fixed; left: 0; top: 100px;}
#next {position: fixed; right: 0; top: 100px;}

JavaScript

var currentElement = $("li:first");

// completely ignoring boundaries

$("#prev").click(function() {
    currentElement = currentElement.prev();
    scrollTo(currentElement);
});

$("#next").click(function() {
    currentElement = currentElement.next();
    scrollTo(currentElement);    
});

function scrollTo(element) {
    $(window).scrollLeft(element.position().left);   
}