While tackling a similar issue using Backbone, jQuery, and Hammer, I managed to find a solution by implementing the following code (sharing only relevant snippets). Hopefully, this can be helpful for someone facing a similar problem.
var Slideshow = Backbone.View.extend( {
events: {
"pan .slideshow-slide" : "handlePan",
"panstart .slideshow-slide" : "handlePanStart",
"panend .slideshow-slide" : "handlePanEnd",
},
state: {
panHistory: [],
},
handlePanStart: function( evt ) {
// fetching the X coordinate of the pan
var startX = this.getPanXFromEvent( evt );
// if unable to retrieve the X coordinate, exit the function
if ( !startX ) {
this.logger.warn( "Pan Start: Unable to find x", evt );
return;
}
this.logger.log( "Pan Start", evt );
// setting the pan array with the initial X coordinate as its first element
this.state.panHistory = [ startX ];
},
handlePan: function( evt ) {
// storing the pan history in a variable
var pans = this.state.panHistory,
// extracting the X coordinate from the pan event
lastX = this.getPanXFromEvent( evt );
// tracking changes on the X axis during the pan to determine user direction
if ( lastX ) {
pans.push( lastX );
}
},
handlePanEnd: function( evt ) {
// determining the direction of the pan
switch ( this.getDirectionFromPanEvent( evt ) ) {
case Hammer.DIRECTION_LEFT:
// moving to the next slide if panned left and within range
if ( !this.isOutOfRange( this.state.current + 1 ) ) {
this.logger.log( "Pan End: Moving Left", evt );
this.gotoNextSlide();
return;
}
case Hammer.DIRECTION_RIGHT:
// moving to the previous slide if panned right and within range
if ( !this.isOutOfRange( this.state.current - 1 ) ) {
this.logger.log( "Pan End: Moving Right", evt );
this.gotoPrevSlide();
return;
}
// Snapping back to the current slide by default
default:
this.logger.log( "Pan End: Snapping Back", evt );
this.gotoSlide( this.state.current );
}
},
getPanXFromEvent: function( evt ) {
return Utils.getValue( "originalEvent.gesture.center.x", evt );
},
getDirectionFromPanHistory: function( evt ) {
// variables for start, end, and last pan X coordinates
var i, start, last, end,
// caching the pan history array
pans = this.state.panHistory;
// returning 0 if there are not enough data points to calculate delta
if ( pans.length < 2 ) {
return 0;
}
// getting the starting pan X
start = pans[ 0 ];
// setting last and end to the last pan X
last = end = pans[ pans.length - 1 ];
// checking for changes in pan X to determine direction
for ( i = pans.length - 2; last === end && i >= 0; i-- ) {
last = pans[ i ];
}
// determining direction based on X coordinates
return end > last && end > start ? Hammer.DIRECTION_RIGHT
: end < last && end < start ? Hammer.DIRECTION_LEFT
: 0;
},
} );