JSFiddle - React, Tailwind, and code Playground

HTML

<div id="right">
<img src="images/right.png">right button
</div>

<div id="left">
<img src="images/left.png">left button
</div>
			<div class="container">
				<div class="wrapper">
					<div class="div1">
					</div>

					<div class="div2">
					</div>

					<div class="div3">
					</div>

					<div class="div4">
					</div>

					<div class="div5">
					</div>

					<div class="div6">
					</div>

					<div class="div7">
					</div>

					<div class="div8">
					</div>
				</div>
			</div>

CSS

.container
{
	width:250px;
	height:250px;
	background-color:green;
	font-size:0px;
	overflow:hidden;
	position:relative;
}

#right img
{
	cursor:  pointer;
}

#left img
{
	cursor:  pointer;
}

.wrapper
{
	width:2000px;
	height:250px;
	position:absolute;
}

.div1
{
	width:250px;
	height:250px;
	background-color:red;
	display: inline-block;
	margin: 0px;
}

.div2
{
	width:250px;
	height:250px;
	background-color:gray;
	display:inline-block;
	margin:0px;
}

.div3
{
	width:250px;
	height:250px;
	background-color:black;
	display:inline-block;
}

.div4
{
	width:250px;
	height:250px;
	background-color:yellow;
	display:inline-block;
}

.div5
{
	width:250px;
	height:250px;
	background-color:blue;
	display: inline-block;
	margin: 0px;
}

.div6
{
	width:250px;
	height:250px;
	background-color:orange;
	display:inline-block;
	margin:0px;
}

.div7
{
	width:250px;
	height:250px;
	background-color:white;
	display:inline-block;
}

.div8
{
	width:250px;
	height:250px;
	background-color:purple;
	display:inline-block;
}

JavaScript

$( "#right" ).click(function() {
$( ".wrapper" ).animate({ right: "+=250px" }, 1000 );
});

$( "#left" ).click(function() {
$( ".wrapper" ).animate({ left: "+=250px" }, 1000 );
});