TouchSwipe distance reset

Question

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

Answer 1

Your code needs some structural changes:

• every time the "swipe end" event is fired the translation return to 0 (that's why you see the gallery resetting )

• the translation needs to be a difference between the last translation and the current one

• this difference needs to be added or subtrancted from the current translation based on the swipe direction

check the example please

$(function() {

  var currentTranslation = 0;
  var lastDistance = 0;
  var translationDelta = 0;

  $("#test5").swipe({
    swipeStatus: swipe2,
    allowPageScroll: "horizontal"
  });
  //Swipe handlers

  function swipe2(event, phase, direction, distance) {
    var check = $(this).children('.swipe-slide');
    if (phase == "end") {
      translationDelta = 0;
    } else {
      translationDelta = lastDistance - distance;
    }

    if (direction == "right") {
      currentTranslation -= translationDelta;
    } else if (direction == "left") {
      currentTranslation += translationDelta;
    }

    var distance2 = "translateX(" + currentTranslation + "px)";

    check.css('transform', distance2);
    lastDistance = distance;
  }
});

.swipe {
  width: 100%;
  min-height: 100px;
  overflow-x: hidden;
  background-color: #444;
  @media (min-width: $screen-sm-min) {
    overflow: auto;
    &: : -webkit-scrollbar {
      display: none;
    }
  }
}
.swipe-wrapper {
  width: 20000px;
  @media (min-width: $screen-lg-min) {
    // width: 100%;

  }
}
.swipe-slide {
  // width: 25%;
  float: left;
  padding: 5px 5px;
  &: : after {
    display: table;
    content: '';
    clear: both;
  }
  img {
    max-height: 150px;
    // max-width: 150px;

  }
  h6 {
    margin: 5px 0;
    text-align: center;
    color: #ddd;
  }
}

<div class="swipe">
  <div class="swipe-wrapper" id="test5">
    <div class="swipe-slide">
      <img src="http://placehold.it/350x150" alt="">
      <h6>placeholder</h6>
    </div>
    <div class="swipe-slide">
      <img src="http://placehold.it/350x150" alt="">
      <h6>placeholder</h6>
    </div>
    <div class="swipe-slide">
      <img src="http://placehold.it/350x150" alt="">
      <h6>placeholder</h6>
    </div>
    <div class="swipe-slide">
      <img src="http://placehold.it/350x150" alt="">
      <h6>placeholder</h6>
    </div>
    <div class="swipe-slide">
      <img src="http://placehold.it/350x150" alt="">
      <h6>placeholder</h6>
    </div>
    <div class="swipe-slide">
      <img src="http://placehold.it/350x150" alt="">
      <h6>placeholder</h6>
    </div>
    <div class="swipe-slide">
      <img src="http://placehold.it/350x150" alt="">
      <h6>placeholder</h6>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.18/jquery.touchSwipe.js"></script>

Answer 2

It seams that you always call "swipe2" with distance = 0. So every time you start swiping it goes back to the beginning of the swipe-able section.

I'm not entirely sure if you can call the function with different variables in your code, so I'd put a hidden field value=0 in the code, at the end of the swipe function update it with the final distance value and at the beginning of the swipe function set distance = hidden field value. If it's the first swipe then distance is zero, if its a consecutive swipe then distance is wherever you are in the swiper.

Hm, setting distance = hf.value doesn't exactly work, but the main issue is that distance = 0 at the beginning of every swipe.

Unless someone smarter would type a better solution ...