Как сделать бесконечную прокрутку карточек?

Question

[yapaofficial]

Я хотел повторить часть с сайта appl но ничего не получается
https://www.apple.com/ru/app-store/снизу сайта есть полоска с эфектом бесконечности, как это можноповторить?
вот то что получилось:

<div class="main-body">
	<div class="main" id="main">
		<div class="item">1111111</div>
		<div class="item">2222222</div>
		<div class="item">3333333</div>
		<div class="item">4444444</div>
		<div class="item">5555555</div>
		<div class="item">6666666</div>
		<div class="item">7777777</div>
		<div class="item">8888888</div>
	</div>
</div>
<!--
transform: translateX(-1463.8px);
-->

<script type="text/javascript">
	const main = document.getElementById('main');
	let counter = 0;

	var mainWidth = document.getElementById('main').scrollWidth;


	//setInterval(() => {
	//  counter -= 1;
	//  main.style.transform = `translateX(${counter}px)`;
	//  if (counter <= -mainWidth) {
	//  	counter = 0;
	//  }
	//}, 10);
</script>


<style type="text/css">
html, body{
	font-family: sans-serif;
	margin: 0;
	height: 100%
}

*{
	box-sizing: border-box;
}

a{
	text-decoration: none;
}

.main-body{
	overflow: hidden;
}

.main{
	display: flex;
	transform: translateX(-1px);
}

.item{
    flex-shrink: 0;
    position: relative;
    width: 390px;
    height: 478px;
    margin: 5px 12px 25px;
    border: 1px solid black;
}
</style>

Answer 1

[Kryptonit]

https://github.com/wunderwaffetun/infiniteSlider здесь очень похожий проект, написан далеко не идеально, но, чтобы разобрать, поковырять и посмотреть вполне сойдёт