carousel.html

<style>
#container {
	display: block;
	max-width: 300px;
	height: 100px;
	overflow: hidden;
	white-space: nowrap;
	padding: 0;
	margin: 0;
}

img {
	display: inline-block;
	padding: 0;
	margin: 0;
}
</style>



<div id="container">
	<img src="https://via.placeholder.com/300x100/FF0000">
	<img src="https://via.placeholder.com/300x100/00FF00">
	<img src="https://via.placeholder.com/300x100/0000FF">
</div>
<button id="left"><</button>
<button id="right">></button>


		
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
	function scroll(dir) {
		var pos = $('#container').scrollLeft();

		if ( dir == "left")
			$('#container').animate({scrollLeft: pos-300});

		else if ( dir == "right" )
			$('#container').animate({scrollLeft: pos+300});
	}

	$('#left').click(() => {scroll("left")});
	$('#right').click(() => {scroll("right")});
</script>