Carousel: Use swipe-listener for proper swipe gesture

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">