Swipe left right

by Julien Etienne

HTML

from:https://stackoverflow.com/questions/15084675/how-to-implement-swipe-gestures-for-mobile-devices/58719294#58719294
<div id='swipeme' class='swipemeclass'>
    swipe me
</div>

CSS

#swipeme {
    width:100%;
    height:100%;
    background-color:orange;
    color:black;
    text-align:center;
    padding-top:20%;
    padding-bottom:20%;
}

JavaScript

const detectswipe => ({
selector, 
 callback,
 xRange
}) {
  const empty = ''  
  const swipes = {
    sX:0,
    sY:0,
    sX:0,
    sY:0,
  }

  let direc = empty
 const el = document.querySelector(selector)
 
  el.addEventListener('touchstart', e => {
    const touches = e.touches[0]
    swipes.sX = touches.screenX
    swipes.sY = touches.screenY
  })
  
  el.addEventListener('touchmove', e => {
  const touches = e.touches[0]
    e.preventDefault();
    swipes.eX = touches.screenX
    swipes.eY = touches.screenY
  })
  
  el.addEventListener('touchend', () => {
    if ((swipes.eX - xRange[0] > swipes.sX) || (swipes.eX + xRange[1] < swipes.sX)) {
      callback(swipes.eX > swipes.sX)
    }
  })
}

function myfunction(direction) {
  alert(direction);
}

detectswipe({
  selector: '#swipeme',
	callback: myfunction,
  xRange: [20, 40]
});