HOW TO ADD SWIPE FEATURE TO A IMAGE GALLERY?

Brad Pitt

Total Post:61

Points:429
Posted by  Brad Pitt
 1251  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. Norman Reedus

    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.

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!