I am trying to create a very simple swiper gallery. But I bumped into a problem. First of all here is my code below:- https://jsfiddle.net/drbj6zk8/2/
function swipe2(event, phase, direction, distance) {
var check = $(this).children('.swipe-slide');
if (!flag) {
distance = dist;
flag = 1;
console.log(dist+' distance start');
}
console.log(phase);
var distance2;
console.log (dist + ' dist');
console.log (distance+ ' distance');
if(phase == 'end' && distance) {
dist += distance;
flag = 0;
console.log(dist+' distance end');
}
if (direction == "left") {
distance2 = "translateX(-"+distance+"px)";
} else if (direction == "right") {
distance2 = "translateX("+distance+"px)";
}
check.css('transform', distance2);
}
Right now, the "gallery" swipes perfectly fine in both direction - left and right. However, the issue comes when I release the mouse button and try to swipe again from where I left of => the destination variable resets to 0 and it's get me back to the initial position of the swiper. Thank You.
Any Ideas on how to fix this and what am I missing?
I am using JQuery and TouchSwipe plugin: http://labs.rampinteractive.co.uk/touchSwipe/docs/tutorial-Page_scrolling.html
Edit: changed link to jsfiddle