Merhaba,
Mobilde parmağımızla yaptığımız sağa, sola, yukarı ve aşağı kaydırma işlemlerine genel olarak swipe diyoruz. Swipe up, swipe down, swipe right, swipe left.. şeklinde.

Pure Javascript

1. JS Swipe Events (swiped-events.js)

   
   /*!
    * swiped-events.js
    * Pure JavaScript swipe events
    */
   (function (window, document) {
   
       'use strict';
   
       // patch CustomEvent to allow constructor creation (IE/Chrome)
       if (typeof window.CustomEvent !== 'function') {
   
           window.CustomEvent = function (event, params) {
   
               params = params || { bubbles: false, cancelable: false, detail: undefined };
   
               var evt = document.createEvent('CustomEvent');
               evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
               return evt;
           };
   
           window.CustomEvent.prototype = window.Event.prototype;
       }
   
       document.addEventListener('touchstart', handleTouchStart, false);
       document.addEventListener('touchmove', handleTouchMove, false);
       document.addEventListener('touchend', handleTouchEnd, false);
   
       var xDown = null;
       var yDown = null;
       var xDiff = null;
       var yDiff = null;
       var timeDown = null;
       var startEl = null;
   
       function handleTouchEnd(e) {
   
           // if the user released on a different target, cancel!
           if (startEl !== e.target) return;
   
           var swipeThreshold = parseInt(getNearestAttribute(startEl, 'data-swipe-threshold', '20'), 10); // default 20px
           var swipeTimeout = parseInt(getNearestAttribute(startEl, 'data-swipe-timeout', '500'), 10);    // default 500ms
           var timeDiff = Date.now() - timeDown;
           var eventType = '';
           var changedTouches = e.changedTouches || e.touches || [];
   
           if (Math.abs(xDiff) > Math.abs(yDiff)) { // most significant
               if (Math.abs(xDiff) > swipeThreshold && timeDiff < swipeTimeout) {
                   if (xDiff > 0) {
                       eventType = 'swiped-left';
                   }
                   else {
                       eventType = 'swiped-right';
                   }
               }
           }
           else if (Math.abs(yDiff) > swipeThreshold && timeDiff < swipeTimeout) {
               if (yDiff > 0) {
                   eventType = 'swiped-up';
               }
               else {
                   eventType = 'swiped-down';
               }
           }
   
           if (eventType !== '') {
   
               var eventData = {
                   dir: eventType.replace(/swiped-/, ''),
                   xStart: parseInt(xDown, 10),
                   xEnd: parseInt((changedTouches[0] || {}).clientX || -1, 10),
                   yStart: parseInt(yDown, 10),
                   yEnd: parseInt((changedTouches[0] || {}).clientY || -1, 10)
               };
   
               // fire `swiped` event event on the element that started the swipe
               startEl.dispatchEvent(new CustomEvent('swiped', { bubbles: true, cancelable: true, detail: eventData }));
   
               // fire `swiped-dir` event on the element that started the swipe
               startEl.dispatchEvent(new CustomEvent(eventType, { bubbles: true, cancelable: true, detail: eventData }));
           }
   
           // reset values
           xDown = null;
           yDown = null;
           timeDown = null;
       }
   
       function handleTouchStart(e) {
   
           // if the element has data-swipe-ignore="true" we stop listening for swipe events
           if (e.target.getAttribute('data-swipe-ignore') === 'true') return;
   
           startEl = e.target;
   
           timeDown = Date.now();
           xDown = e.touches[0].clientX;
           yDown = e.touches[0].clientY;
           xDiff = 0;
           yDiff = 0;
       }
   
       function handleTouchMove(e) {
   
           if (!xDown || !yDown) return;
   
           var xUp = e.touches[0].clientX;
           var yUp = e.touches[0].clientY;
   
           xDiff = xDown - xUp;
           yDiff = yDown - yUp;
       }
   
       function getNearestAttribute(el, attributeName, defaultValue) {
   
           // walk up the dom tree looking for data-action and data-trigger
           while (el && el !== document.documentElement) {
   
               var attributeValue = el.getAttribute(attributeName);
   
               if (attributeValue) {
                   return attributeValue;
               }
   
               el = el.parentNode;
           }
   
           return defaultValue;
       }
   
   }(window, document));
   
   

2. Swipe Events Kullanımı:

   
   ///// Swipe Events
   document.addEventListener('swiped-left', function(e) {
     console.log(e.target); // element that was swiped
     console.log(e.detail); // event data { dir: 'left', xStart: 196, xEnd: 230, yStart: 196, yEnd: 4 }
   });
   
   document.addEventListener('swiped-right', function(e) {
     console.log(e.target); // element that was swiped
     console.log(e.detail); // event data { dir: 'right', xStart: 196, xEnd: 230, yStart: 196, yEnd: 4 }
   });
   
   document.addEventListener('swiped-up', function(e) {
     console.log(e.target); // element that was swiped
     console.log(e.detail); // event data { dir: 'up', xStart: 196, xEnd: 230, yStart: 196, yEnd: 4 }
   });
   
   document.addEventListener('swiped-down', function(e) {
     console.log(e.target); // element that was swiped
     console.log(e.detail); // event data { dir: 'down', xStart: 196, xEnd: 230, yStart: 196, yEnd: 4 }
   });