Add swipe detection to user voices carousel

index.html

@@ -716,9 +716,21 @@
 
     <script src="{{ site.baseurl }}/js/web-api.js"></script>
 
+    <script src="{{ site.baseurl }}/js/swipe.js"></script>
+
     <!-- Script to detect whether the browser supports touch -->
     <script>
         document.documentElement.className += (!("ontouchstart" in document.documentElement) ? "no-" : "") + "touch";
+
+        var swiper = new Swipe('#user-voices');
+        swiper.onLeft(function() {
+            $('#user-voices-carousel').carousel('next');
+        });
+        swiper.onRight(function() {
+            $('#user-voices-carousel').carousel('prev');
+        });
+        swiper.run();
+
     </script>
 
     <!-- Load and play animation on medium and large screens -->

js/swipe.js

@@ -0,0 +1,73 @@
+class Swipe {
+    constructor(element) {
+        this.xDown = null;
+        this.yDown = null;
+        this.element = typeof(element) === 'string' ? document.querySelector(element) : element;
+
+        this.element.addEventListener('touchstart', function(evt) {
+            this.xDown = evt.touches[0].clientX;
+            this.yDown = evt.touches[0].clientY;
+        }.bind(this), false);
+
+    }
+
+    onLeft(callback) {
+        this.onLeft = callback;
+
+        return this;
+    }
+
+    onRight(callback) {
+        this.onRight = callback;
+
+        return this;
+    }
+
+    onUp(callback) {
+        this.onUp = callback;
+
+        return this;
+    }
+
+    onDown(callback) {
+        this.onDown = callback;
+
+        return this;
+    }
+
+    handleTouchMove(evt) {
+        if ( ! this.xDown || ! this.yDown ) {
+            return;
+        }
+
+        var xUp = evt.touches[0].clientX;
+        var yUp = evt.touches[0].clientY;
+
+        this.xDiff = this.xDown - xUp;
+        this.yDiff = this.yDown - yUp;
+
+        if ( Math.abs( this.xDiff ) > Math.abs( this.yDiff ) ) { // Most significant.
+            if ( this.xDiff > 0 ) {
+                this.onLeft();
+            } else {
+                this.onRight();
+            }
+        } else {
+            if ( this.yDiff > 0 ) {
+                this.onUp();
+            } else {
+                this.onDown();
+            }
+        }
+
+        // Reset values.
+        this.xDown = null;
+        this.yDown = null;
+    }
+
+    run() {
+        this.element.addEventListener('touchmove', function(evt) {
+            this.handleTouchMove(evt).bind(this);
+        }.bind(this), false);
+    }
+}