javascriptで左右見切れているカルーセルの実装

Question

表題の通り、javascriptで左右見切れているカルーセルの実装をしているのですが、どうプログラムしていいかわかりません。

下記にイメージ画像を貼っておきます。

ネットで検索してでてくるのはjQueryばかりでjavascriptでの実装の情報は少ないように感じましたので、こちらで質問させていただきました。

ここからどうコーディングしていくか教えていただけないでしょうか。

<div class="slider-area">
		<ul class="boxslider">
			<li>box1</li>
			<li>box2</li>
			<li>box3</li>
			<li>box4</li>
			<li>box5</li>
		</ul>

	</div>
	<button id="return">&laquo;</button>
	<button id="next">&raquo;</button>
	
	<script src="test.js"></script>

* {
	margin: 0;
	padding: 0;
}

.slider-area {
	position: relative;
	width: 100%;
	height: 250px;
}

.boxslider {
	width: 100%;
	height: 100%;
	list-style: none;
	display: flex;
	/* overflow: hidden; */
	/* position: relative; */

	/* outline: red solid; */
}

#next, #return {
	position: absolute;
	top: 125px;
	transform: translateY(-50%);
	font-size: 30px;
	border: none;
	background: rgba(0, 0, 0, 0.615);
	color: white;
	padding: 10px;

}

#next {
	right: 0;
}

#return {
	left: 0;
}

.hidden {
	display: none;
}

li {
	height: 100%;
	min-width: 100%;
	color: white;
	font-size: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	
}

li:nth-of-type(1) {
	background: red;
}
li:nth-of-type(2) {
	background: blue;
}
li:nth-of-type(3) {
	background: orange;
}
li:nth-of-type(4) {
	background: rebeccapurple;
}
li:nth-of-type(5) {
	background: skyblue;
}

	const boxslider = document.querySelector('.boxslider');
	const next = document.getElementById('next');
	const rtn = document.getElementById('return');
	const box = boxslider.children;
	let Index = 0;

	function hid() {
		if (Index === 0) {
			rtn.classList.add('hidden');
			next.classList.remove('hidden');
		};

		if (Index === box.length - 1) {
			next.classList.add('hidden');
			rtn.classList.remove('hidden');
		};
	}

	hid()
	next.addEventListener('click', () => {
		
		Index++;
		hid()
		const boxwidth = box[0].getBoundingClientRect().width;
		boxslider.style.transform = `translateX(${-1 * boxwidth * Index}px)`;
		boxslider.style.transition = '0.4s'
	});

	rtn.addEventListener('click', () => {
		
		Index--;
		hid()
		const boxwidth = box[0].getBoundingClientRect().width;
		boxslider.style.transform = `translateX(${-1 * boxwidth * Index}px)`;
		boxslider.style.transition = '0.4s'
	});