JSFiddle - React, Tailwind, and code Playground

HTML

<div class="items">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
</div>
<div class="nextbutton">Next</div>
<div class="prevbutton">Prev</div>

CSS

.items {
    white-space: nowrap;
    width: 700px;
    border:1px solid green;
    overflow-y:scroll;
}
.item {
    width: 200px;
    height: 400px;
    border: 1px solid red;
    display: inline-block;
    background-color:#ddd;
    font-size:30pt;
    text-align:center;
    line-height:400px;
}
.nextbutton,.prevbutton{
    border:1px solid red;
    padding:20px;
    color:red;
    background-color:green;
    display:inline-block;
}

JavaScript

$(document).ready(function(){
		
		$(".prevbutton").click(function(){
			$( ".items" ).scrollLeft( $( ".items" ).scrollLeft()-200 );
			//how use one item
		});
		
		$(".nextbutton").click(function(){
						$( ".items" ).scrollLeft( $( ".items" ).scrollLeft()+200 );
		});
		
});