yavor.vasilev yavor.vasilev - 13 days ago 4
Javascript Question

TouchSwipe distance reset

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

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>