https://mutuabalear.es/js/lib/swipe-detect.js

1// Demo http://codepen.io/AlexEmashev/pen/BKgQdx
2(function ($) {
3  $.fn.swipeDetector = function (options) {
4    // States: 0 - no swipe, 1 - swipe started, 2 - swipe released
5    var swipeState = 0;
6    // Coordinates when swipe started
7    var startX = 0;
8    var startY = 0;
9    // Distance of swipe
10    var pixelOffsetX = 0;
11    var pixelOffsetY = 0;
12    // Target element which should detect swipes.
13    var swipeTarget = this;
14    var defaultSettings = {
15      // Amount of pixels, when swipe don't count.
16      swipeThreshold: 70,
17      // Flag that indicates that plugin should react only on touch events.
18      // Not on mouse events too.
19      useOnlyTouch: false
20    };
21    
22    // Initializer
23    (function init() {
24      options = $.extend(defaultSettings, options);
25      // Support touch and mouse as well.
26      swipeTarget.on('mousedown touchstart', swipeStart);
27      $('html').on('mouseup touchend', swipeEnd);
28      $('html').on('mousemove touchmove', swiping);
29    })();
30    
31    function swipeStart(event) {
32      if (options.useOnlyTouch && !event.originalEvent.touches)
33        return;
34      
35      if (event.originalEvent.touches)
36        event = event.originalEvent.touches[0];
37      
38      if (swipeState === 0) {
39        swipeState = 1;
40        startX = event.clientX;
41        startY = event.clientY;
42      }
43    }
44    
45    function swipeEnd(event) {
46      if (swipeState === 2) {
47        swipeState = 0;
48        
49        if (Math.abs(pixelOffsetX) > Math.abs(pixelOffsetY) &&
50           Math.abs(pixelOffsetX) > options.swipeThreshold) { // Horizontal Swipe
51          if (pixelOffsetX < 0) {
52            swipeTarget.trigger($.Event('swipeLeft.sd'));
53            console.log('Left');
54          } else {
55            swipeTarget.trigger($.Event('swipeRight.sd'));
56            console.log('Right');
57          }
58        } else if (Math.abs(pixelOffsetY) > options.swipeThreshold) { // Vertical swipe
59          if (pixelOffsetY < 0) {
60            swipeTarget.trigger($.Event('swipeUp.sd'));
61            console.log('Up');
62          } else {
63            swipeTarget.trigger($.Event('swipeDown.sd'));
64            console.log('Down');
65          }
66        }
67      }
68    }
69    
70    function swiping(event) {
71      // If swipe don't occuring, do nothing.
72      if (swipeState !== 1) 
73        return;
74      
75      
76      if (event.originalEvent.touches) {
77        event = event.originalEvent.touches[0];
78      }
79      
80      var swipeOffsetX = event.clientX - startX;
81      var swipeOffsetY = event.clientY - startY;
82      
83      if ((Math.abs(swipeOffsetX) > options.swipeThreshold) ||
84          (Math.abs(swipeOffsetY) > options.swipeThreshold)) {
85        swipeState = 2;
86        pixelOffsetX = swipeOffsetX;
87        pixelOffsetY = swipeOffsetY;
88        console.log(pixelOffsetX);
89      }
90    }
91    
92    return swipeTarget; // Return element available for chaining.
93  }
94
95}(jQuery));