add swipe functionality and optimize for mobile

package-lock.json

@@ -1,12 +1,15 @@
 {
-	"name": "svelte-test",
+	"name": "card-quartett-carousel",
 	"version": "0.0.1",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
-			"name": "svelte-test",
+			"name": "card-quartett-carousel",
 			"version": "0.0.1",
+			"dependencies": {
+				"svelte-gestures": "^1.4.1"
+			},
 			"devDependencies": {
 				"@sveltejs/adapter-static": "^1.0.4",
 				"@sveltejs/kit": "^1.0.0",
@@ -2939,6 +2942,11 @@
 				"svelte": "^3.55.0"
 			}
 		},
+		"node_modules/svelte-gestures": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/svelte-gestures/-/svelte-gestures-1.4.1.tgz",
+			"integrity": "sha512-TAmfcz+DgdfrRDFSQ9UsXxhqDjQR7LaUaALauqITaTCVSHPWXIZ9WSBPP6DrXh9MYqgVZwy85wJdv7NQPwsZfA=="
+		},
 		"node_modules/svelte-hmr": {
 			"version": "0.15.1",
 			"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.1.tgz",
@@ -5273,6 +5281,11 @@
 				"typescript": "^4.9.4"
 			}
 		},
+		"svelte-gestures": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/svelte-gestures/-/svelte-gestures-1.4.1.tgz",
+			"integrity": "sha512-TAmfcz+DgdfrRDFSQ9UsXxhqDjQR7LaUaALauqITaTCVSHPWXIZ9WSBPP6DrXh9MYqgVZwy85wJdv7NQPwsZfA=="
+		},
 		"svelte-hmr": {
 			"version": "0.15.1",
 			"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.1.tgz",

package.json

@@ -5,6 +5,7 @@
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
+		"dev-host": "vite dev --host",
 		"build": "vite build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
@@ -31,5 +32,8 @@
 		"typescript": "^4.9.3",
 		"vite": "^4.0.0"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"svelte-gestures": "^1.4.1"
+	}
 }

src/lib/components/CarCard.svelte

@@ -16,16 +16,16 @@
 </script>
 
 <div
-	class="w-[350px] h-[500px] absolute bg-white rounded-xl p-2"
-	style="transform: rotateY({rotation}deg) translateZ(250px);"
+	class="w-[250px] md:w-[350px] h-[400px] md:h-[500px] absolute bg-white rounded-xl p-2"
+	style="transform: rotateY({rotation}deg) translateZ(200px);"
 >
 	<div class="bg-zinc-700 h-full rounded-xl overflow-hidden">
 		<h1
-			class="mb-2 text-lg font-semibold text-white bg-zinc-800 shadow-lg w-fit py-1 px-3 rounded-md"
+			class="mb-2 text-sm md:text-lg font-semibold text-white bg-zinc-800 shadow-lg w-fit py-1 px-3 rounded-md"
 		>
 			{title}
 		</h1>
-		<div class="w-full h-[200px]">
+		<div class="w-full h-[125px] md:h-[200px]">
 			<img class="object-cover w-full h-full" alt="" src={img} />
 		</div>
 		<div class="grid grid-cols-2 gap-4 p-5">

src/lib/components/DetailBox.svelte

@@ -5,11 +5,11 @@
 </script>
 
 <div
-	class="relative bg-zinc-400 border-white border-2 rounded-lg p-2 grid place-items-center shadow-lg"
+	class="relative bg-zinc-400 border-white border-2 rounded-lg p-1 md:p-2 grid place-items-center shadow-lg"
 >
 	<div class="bg-white absolute top-1/2 -translate-y-1/2 -left-3 p-1 rounded-full">
-		<img src={icon} alt="" class="w-5 h-5" />
+		<img src={icon} alt="" class="w-3 h-3 md:w-5 md:h-5" />
 	</div>
-	<span class="text-xs font-light">{title}</span>
-	<span class="font-semibold">{value}</span>
+	<span class="text-[8px] md:text-xs font-light">{title}</span>
+	<span class="text-sm md:text-base font-semibold">{value}</span>
 </div>

src/routes/+page.svelte

@@ -1,17 +1,33 @@
 <script lang="ts">
+	import { swipe } from 'svelte-gestures';
 	import CarCard from '$lib/components/CarCard.svelte';
 	import cars from '$lib/constants/cars';
+
 	const partialRotation = 360 / cars.length;
 	let current = 0;
+
 	function next() {
 		current++;
 	}
+
+	function previous() {
+		current--;
+	}
+
+	function handleSwipe(e: any) {
+		if (e.detail.direction === 'left') {
+			previous();
+		} else {
+			next();
+		}
+	}
 </script>
 
-<div class="h-screen w-full grid place-items-center bg-zinc-900">
-	<div class="relative mx-auto w-[350px] h-[500px] carousel-container ">
+<div class="h-screen w-full overflow-hidden grid place-items-center bg-zinc-900">
+	<div class="relative w-[250px] md:w-[350px] h-[400px] md:h-[500px] carousel-container ">
 		<div
-			on:click={next}
+			use:swipe={{ timeframe: 300, minSwipeDistance: 100, touchAction: 'pan-y' }}
+			on:swipe={handleSwipe}
 			class="carousel w-full h-full absolute"
 			style="transform: rotateY({current * partialRotation}deg);"
 		>
@@ -19,6 +35,18 @@
 				<CarCard rotation={i * partialRotation} {...car} />
 			{/each}
 		</div>
+		<div class="hidden md:block md:absolute -bottom-28 left-1/2 -translate-x-1/2 space-x-3">
+			<button
+				on:click={previous}
+				class="bg-zinc-600 py-2 px-4 rounded-lg text-white hover:opacity-90 active:opacity-80"
+				>Prev</button
+			>
+			<button
+				on:click={next}
+				class="bg-zinc-600 py-2 px-4 rounded-lg text-white hover:opacity-90 active:opacity-80"
+				>Next</button
+			>
+		</div>
 	</div>
 </div>
 

src/routes/[test]/+page.svelte

@@ -1,5 +0,0 @@
-<script lang="ts">
-	import { page } from '$app/stores';
-</script>
-
-<div>{$page.params.test}</div>