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

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

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

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

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

html
1<div class="slider-area">
2		<ul class="boxslider">
3			<li>box1</li>
4			<li>box2</li>
5			<li>box3</li>
6			<li>box4</li>
7			<li>box5</li>
8		</ul>
9
10	</div>
11	<button id="return">&laquo;</button>
12	<button id="next">&raquo;</button>
13	
14	<script src="test.js"></script>

css
1* {
2	margin: 0;
3	padding: 0;
4}
5
6.slider-area {
7	position: relative;
8	width: 100%;
9	height: 250px;
10}
11
12.boxslider {
13	width: 100%;
14	height: 100%;
15	list-style: none;
16	display: flex;
17	/* overflow: hidden; */
18	/* position: relative; */
19
20	/* outline: red solid; */
21}
22
23#next, #return {
24	position: absolute;
25	top: 125px;
26	transform: translateY(-50%);
27	font-size: 30px;
28	border: none;
29	background: rgba(0, 0, 0, 0.615);
30	color: white;
31	padding: 10px;
32
33}
34
35#next {
36	right: 0;
37}
38
39#return {
40	left: 0;
41}
42
43.hidden {
44	display: none;
45}
46
47li {
48	height: 100%;
49	min-width: 100%;
50	color: white;
51	font-size: 40px;
52	display: flex;
53	justify-content: center;
54	align-items: center;
55	
56}
57
58li:nth-of-type(1) {
59	background: red;
60}
61li:nth-of-type(2) {
62	background: blue;
63}
64li:nth-of-type(3) {
65	background: orange;
66}
67li:nth-of-type(4) {
68	background: rebeccapurple;
69}
70li:nth-of-type(5) {
71	background: skyblue;
72}

javascript
1	const boxslider = document.querySelector('.boxslider');
2	const next = document.getElementById('next');
3	const rtn = document.getElementById('return');
4	const box = boxslider.children;
5	let Index = 0;
6
7	function hid() {
8		if (Index === 0) {
9			rtn.classList.add('hidden');
10			next.classList.remove('hidden');
11		};
12
13		if (Index === box.length - 1) {
14			next.classList.add('hidden');
15			rtn.classList.remove('hidden');
16		};
17	}
18
19	hid()
20	next.addEventListener('click', () => {
21		
22		Index++;
23		hid()
24		const boxwidth = box[0].getBoundingClientRect().width;
25		boxslider.style.transform = `translateX(${-1 * boxwidth * Index}px)`;
26		boxslider.style.transition = '0.4s'
27	});
28
29	rtn.addEventListener('click', () => {
30		
31		Index--;
32		hid()
33		const boxwidth = box[0].getBoundingClientRect().width;
34		boxslider.style.transform = `translateX(${-1 * boxwidth * Index}px)`;
35		boxslider.style.transition = '0.4s'
36	});