page-white-label/src/lib/components/Carousel2.svelte

<script>
	import { imagesconfig } from '$lib/config';

	const caroucel1_2img = imagesconfig.caroucel1_2img;
	const caroucel2_2img = imagesconfig.caroucel2_2img;
	const caroucel3_2img = imagesconfig.caroucel3_2img;
	const caroucel4_2img = imagesconfig.caroucel4_2img;
	const caroucel5_2img = imagesconfig.caroucel5_2img;
</script>

<div class="w-full overflow-hidden bg-gradient-to-tr from-[#1a1a1a] to-[#2d2d2d] py-4">
	{#if imagesconfig.caroucel_section2}
		<div class="marquee flex w-max">
			<div class="flex gap-4">
				<img
					src={caroucel1_2img}
					class="ml-16 mr-16 h-[120px] w-[400px] rounded-lg object-cover shadow"
					alt="Logo Luv2Mob"
				/>
				<img
					src={caroucel2_2img}
					class="ml-16 mr-16 h-[100px] w-[400px] rounded-lg object-cover shadow"
					alt="Logo SMP"
				/>
				<img
					src={caroucel3_2img}
					class="ml-16 mr-16 h-[120px] w-[350px] rounded-lg object-cover p-3 shadow"
					alt="Logo Swapx"
				/>
				<img
					src={caroucel4_2img}
					class="ml-16 mr-16 h-[100px] w-[500px] rounded-lg object-cover shadow"
					alt="Logo Ventura"
				/>
				<img
					src={caroucel5_2img}
					class="ml-16 mr-16 h-[100px] w-[200px] rounded-lg object-cover p-2 shadow"
					alt="Logo plugase"
				/>
			</div>

			<div class="flex gap-4">
				<img
					src={caroucel1_2img}
					class="ml-16 mr-16 h-[110px] w-[350px] rounded-lg object-cover p-5 shadow"
					alt="Logo Luv2Mob"
				/>
				<img
					src={caroucel2_2img}
					class="ml-16 mr-16 h-[100px] w-[400px] rounded-lg object-cover shadow"
					alt="Logo SMP"
				/>
				<img
					src={caroucel3_2img}
					class="ml-16 mr-16 h-[120px] w-[350px] rounded-lg object-cover p-3 shadow"
					alt="Logo Swapx"
				/>
				<img
					src={caroucel4_2img}
					class="ml-16 mr-16 h-[100px] w-[500px] rounded-lg object-cover shadow"
					alt="Logo Ventura"
				/>
				<img
					src={caroucel5_2img}
					class="ml-16 mr-16 h-[100px] w-[200px] rounded-lg object-cover p-2 shadow"
					alt="Logo plugase"
				/>
			</div>
		</div>
	{/if}
</div>

<style>
	@keyframes marquee {
		0% {
			transform: translateX(-50%);
		}
		100% {
			transform: translateX(0%);
		}
	}

	.marquee {
		animation: marquee 40s linear infinite;
	}
</style>