How to add swipe feature to a image gallery?

Total Post:61

Points:429
 1540  View(s)
Ratings:
Rate this:
I have an image gallery and I want to add swipe feature to it,next and prev big image. I don't want to use any pluggin. I have some code, I tried some but I was unable to make it work. Any advice is highly appreciated.

$(document).on("pagecreate","#pageone",function(){
 $("img").on("swipeleft",function(){
    console.log("Left");
  }); 
 $("img").on("swiperight",function(){
    console.log("Right");
  });                          
});

Jsfiddle

Thanks!
  1. Post:45

    Points:315
    Re: How to add swipe feature to a image gallery?jq

    the swipeleft event listener is not available with only jQuery. You can use jQuery Mobile, or craft your own using the touchstart, touchmove, and touchend. Assuming you only want to execute something once, the following code should do:

    var swiping = false;
    $('#div').on('touchmove', function (event) {
      swiping = true;
    })
    $('#div').on('touchstart', function (event) {
      setTimeout(function() {
        if ( swiping = true ) {
          console.log('swiping');
        }
      }, 50)
    })

    The setTimeout likely isn't necessary since touchmove begins at the same time as touchstart - but I left it there in case any given browser performs differently.

      Modified On Apr-07-2018 06:05:39 AM

Answer