forum

Home / DeveloperSection / Forums / How to add swipe feature to a image gallery?

Ask Question

How to add swipe feature to a image gallery?

Anonymous User 2125 31-Dec-2014
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!
jquery jquery  javascript 
Updated on 31-Dec-2014
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

1 Answers

Norman Reedus

Norman Reedus

31-Dec-2014

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.

Liked By