Gestos móviles y teclado

src/lib/CarouselGallery.svelte

@@ -8,6 +8,9 @@
   let expanded = false;
   let loaded = false;
   let currentImage = null;
+  let touch = { startX: 0, startY: 0 };
+  let flyX = 0;
+  let flyY = 20;
 
   function loadImage() {
     currentImage = images[currentIndex];
@@ -30,6 +33,8 @@
   }
 
   function closeImage() {
+    flyX = 0;
+    flyY = 20;
     expanded = false;
   }
 
@@ -42,16 +47,50 @@
   function handleKeyDown(event) {
     if (event.key === "Escape") {
       closeImage();
+    } else if (event.key === "ArrowLeft") {
+      handleLeftArrow();
+    } else if (event.key === "ArrowRight") {
+      handleRightArrow();
+    }
+  }
+
+  function handleTouchStart(event) {
+    if (event.touches.length === 1) {
+      const t = event.touches[0];
+      touch.startX = t.clientX;
+      touch.startY = t.clientY;
+    }
+  }
+
+  function handleTouchEnd(event) {
+    if (event.changedTouches.length === 1) {
+      const t = event.changedTouches[0];
+      const deltaX = t.clientX - touch.startX;
+      const deltaY = t.clientY - touch.startY;
+      const absDeltaX = Math.abs(deltaX);
+      const absDeltaY = Math.abs(deltaY);
+
+      if (absDeltaX > absDeltaY) {
+        if (deltaX > 0) {
+          handleLeftArrow();
+        } else {
+          handleRightArrow();
+        }
+      }
     }
   }
 
   function handleLeftArrow() {
     currentIndex = (currentIndex - 1 + images.length) % images.length;
+    flyX = -40
+    flyY = 0
     show(currentIndex);
   }
 
   function handleRightArrow() {
     currentIndex = (currentIndex + 1) % images.length;
+    flyX = 40
+    flyY = 0
     show(currentIndex);
   }
 </script>
@@ -61,7 +100,8 @@
 {#if expanded}
   <div
     class="fixed top-0 left-0 right-0 bottom-0 flex items-center justify-center bg-black bg-opacity-75 z-10 backdrop-blur-sm"
-    transition:fade="{{ duration: 150 }}" on:click={handleClickInside}
+    transition:fade="{{ duration: 150 }}"
+    on:click="{handleClickInside}"
     on:keydown>
     {#if !loaded}
       <div
@@ -71,7 +111,7 @@
         <span class="paragraph">Loading...</span>
       </div>
     {:else}
-      <div>
+      <div on:touchstart="{handleTouchStart}" on:touchend="{handleTouchEnd}">
         <button class="close-button-t" on:click="{closeImage}" transition:fade>
         </button>
         <img
@@ -80,9 +120,9 @@
           loading="lazy"
           src="{currentImage.src}"
           alt="{currentImage.title}}"
-          in:fly="{{ duration: 350, y: 20 }}"
-          out:fly="{{ duration: 125, y: 20 }}"
-          on:click={handleClickInside}
+          in:fly="{{ duration: 350, y: flyY, x: flyX }}"
+          out:fly="{{ duration: 125, y: flyY * 4, x: flyX }}"
+          on:click="{handleClickInside}"
           on:keydown />
         <button
           class="left-arrow-t"