JSFiddle - React, Tailwind, and code Playground

by gianlucaguarini

HTML

<script src="https://rawgithub.com/GianlucaGuarini/Tocca.js/master/Tocca.js"></script>
<ul id="imagelist">
    <li><img src="http://lorempixel.com/400/200/" /></li>
    <li><img src="http://lorempixel.com/400/200/" /></li>
    <li><img src="http://lorempixel.com/400/200/" /></li>
    <li><img src="http://lorempixel.com/400/200/" /></li>
    <li><img src="http://lorempixel.com/400/200/" /></li>
    <li><img src="http://lorempixel.com/400/200/" /></li>
</ul>

JavaScript

var imgs = $('#imagelist');
imgs.on('tap',updateHtml)
imgs.on('swipeleft',updateHtml)
imgs.on('swiperight',updateHtml)
imgs.on('touchmove touchstart touchend',function(e){e.preventDefault()})

function updateHtml (e,data){
    e.preventDefault();
    if(e.type == "tap") {
        alert('Tapped');
    }
    else if (e.type == "swipeleft") {
        alert("Swipe Left");  
    }
    else if (e.type == "swiperight") {
        alert("Swipe Right");
    }
}