Carousel: Use swipe-listener for proper swipe gesture

package.json

@@ -24,6 +24,7 @@
     "polka": "^1.0.0-next.9",
     "scroll-out": "^2.2.8",
     "sirv": "^0.4.2",
+    "swipe-listener": "^1.1.0",
     "zenscroll": "^4.0.2"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -7,6 +7,7 @@ dependencies:
   polka: 1.0.0-next.11
   scroll-out: 2.2.8
   sirv: 0.4.2
+  swipe-listener: 1.1.0
   zenscroll: 4.0.2
 devDependencies:
   '@babel/core': 7.9.0
@@ -4286,6 +4287,10 @@ packages:
       node: '>= 8'
     resolution:
       integrity: sha512-m/dw52BZf+p6KYnyKLErIcGalu4pwJrQbUM7VZriRw6ZlJj1qMAZsLcIWzEB3I0hhdJwkKb7LrrvUIeqmbO92Q==
+  /swipe-listener/1.1.0:
+    dev: false
+    resolution:
+      integrity: sha512-89mLHgoTejI2I1/oK6x8OGov6fwK6ujcSb8is8yWHo9txBOpm4a6k06MUUr7WNFvMMHYgY50IPRMxSk7ce43TQ==
   /table/5.4.6:
     dependencies:
       ajv: 6.12.0
@@ -4607,4 +4612,5 @@ specifiers:
   sirv: ^0.4.2
   svelte: ^3.20.1
   svelte-preprocess: ^3.6.0
+  swipe-listener: ^1.1.0
   zenscroll: ^4.0.2

src/organisms/Carousel.svelte

@@ -3,8 +3,9 @@
     import { stores } from '@sapper/app'
     import { currentLocation, fullscreen } from '../utils/store'
     import { getThumbnail, formatDate } from '../utils/functions'
-    const dispatch = createEventDispatcher()
-    const { page } = stores()
+
+    // Dependencies
+    import SwipeListener from 'swipe-listener'
 
     // Animations
     import { animateIn } from '../animations/Carousel'
@@ -20,6 +21,8 @@
     export let init = undefined
 
     // Variables
+    const dispatch = createEventDispatcher()
+    const { page } = stores()
     let scope
     let hover
     let currentIndex = 0
@@ -50,6 +53,7 @@
 
         // Dispatch current photo
         sendCurrentPhoto()
+
         // Reset fullscreen value if open
         fullscreen.set()
     }
@@ -64,22 +68,14 @@
 
 
     /*
-    ** Drag and touch navigation
+    ** Drag/touch navigation
     */
-    let touchStartX = 0
-    let touchStartY = 0
-    let touchEndX = 0
-    let touchEndY = 0
-
-    const swipeStart = event => {
-        touchStartX = event.changedTouches[0].screenX
-        touchStartY = event.changedTouches[0].screenY
-    }
-    const swipeEnd = event => {
-        touchEndX = event.changedTouches[0].screenX
-        touchEndY = event.changedTouches[0].screenY
-        if (touchEndX <= touchStartX) goToPhoto('next')
-        if (touchEndX >= touchStartX) goToPhoto('prev')
+    const swipe = directions => {
+        if (directions.right) {
+            goToPhoto('prev')
+        } else if (directions.left) {
+            goToPhoto('next')
+        }
     }
 
 
@@ -104,6 +100,9 @@
             animateIn(scope)
         }
 
+        // Enable gestures
+        const touch = SwipeListener(scope)
+
         // Controls hover
         hover = event => {
             const button = event.currentTarget.querySelector('button')
@@ -135,9 +134,8 @@
 
 {#if photos.length}
 <div class="carousel"
-    on:touchstart={swipeStart}
-    on:touchend={swipeEnd}
     bind:this={scope}
+    on:swipe={event => swipe(event.detail.directions)}
 >
     <div class="wrap">
         <div class="gallery">