JSFiddle - React, Tailwind, and code Playground

by Maiki Nahara

HTML

<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
<div class='container'>
<span id='info'> Swipe left!</span>
</div>

CSS

.container {
  width: 500px;
  height: 800px;
  border: 1px solid gray;
}

JavaScript

var el = document.getElementsByClassName('container')[0]
var mc = new Hammer(el);
var info = document.getElementById('info')
mc.on("panleft", function(ev) {
  info.textContent = 'distance: ' + Math.round(ev.distance)
	if(ev.distance > 100) {
		alert('route to next page')
	}
});