How to handle swipes in pure JS? Will libraries need to be included?

Question

JavaScript

So it goes.
While the project is based on pure JS, I started the mobile version and realized that I can’t even imagine how things are in JS with touch displays.
I only remember that a couple of years ago I heard something about some libraries, but it's all very vague.
Usually the task was solved head-on - you google, download the slider and it is most likely that functionality for touch devices is already implemented in it.
I have a slider written with my own hands and now I’m thinking what to do with swipes?

Answer 1

connect to the project for example jQuery Mobile
api.jquerymobile.com/category/events
there are all the necessary events
well, or since you are a homemade write your handlers, here is a sketch for swipes

handleTouchStart =function(e) {                                         
    xDown = e.touches[0].clientX;                                      
    yDown = e.touches[0].clientY;                                      
};
                                                
handleTouchMove = function(e) {
    if ( ! xDown || ! yDown ) {
        return;
    }

    var xUp = e.touches[0].clientX;                                    
    var yUp = e.touches[0].clientY;

    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;

    if(Math.abs( xDiff )+Math.abs( yDiff )>150)
      if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
        if ( xDiff > 0 ) 
            alert('лево');
         else 
            alert('право');                   
      } else {
        if ( yDiff > 0 ) 
            alert('вверх'); 
         else 
            alert('вниз');                                                                 
      }
    xDown = null;
    yDown = null;
};

var xDown = null;                                                        
var yDown = null;

document.addEventListener('touchstart', handleTouchStart, false);        
document.addEventListener('touchmove', handleTouchMove, false);

Answer 2

hammerjs.github.io

Answer 3

https://developer.mozilla.org/en-US/docs/Web/API/T...