<script lang="ts">
	const imported = import.meta.glob('$lib/assets/img/banners/*', { eager: true });
	let banners: Array<string> = [];
	for (const img in imported) {
		banners.push(img);
	}
</script>

<div class="holder noselect">
	<div class="marquee">
		{#each banners as banner}
			<img src={banner} alt="" />
		{/each}
		{#each banners as banner}
			<img src={banner} alt="" />
		{/each}
	</div>
</div>

<style>
	img {
		width: 88px;
		height: 31px;
	}
    .holder {
		font-family: none;
		margin: .5em auto;
        overflow: hidden;
		height: 31px;
    }
	.marquee {
		display: inline-flex;
		gap: 5px;

		animation: marquee 120s linear infinite;
	}
	@keyframes marquee {
		0% {
			transform: translateZ(0);
		}
		to {
			transform: translate3d(-50%, 0, 0);
		}
	}
</style>