ac360
ac360

Reputation: 7835

Swipe.js - Simple Detection of User's Scrolling Direction (Back or Forward?)

This is simple, I'm sure of it, yet too complicated for me at the moment.

Swipe.js, a mobile slider, provides lots of good information on each slide, as well as a two functions that can be performed during a slide and at the end, yet I'm having a hard time writing some simple logic that detects whether the user is scrolling to the next slide, or previous:

Swipe.js: https://github.com/bradbirdsall/Swipe

Available functions:

window.mySwipe = new Swipe(document.getElementById('slider'), {
  callback: function(index, elem) {},
  transitionEnd: function(index, elem) {}
});

Swipe's Simple API

Swipe API
Swipe exposes a few functions that can be useful for script control of your slider.

prev() slide to prev

next() slide to next

getPos() returns current slide index position

getNumSlides() returns the total amount of slides

slide(index, duration) slide to set index position (duration: speed of transition in milliseconds)

Upvotes: 0

Views: 4526

Answers (2)

Alex Golovin
Alex Golovin

Reputation: 332

Check API docs for slideNextTransitionStart, slideNextTransitionEnd, slidePrevTransitionStart, slidePrevTransitionEnd

Upvotes: 0

Jack
Jack

Reputation: 8941

Something like this could get you there. You'll want to only do this in one of the callback functions in production but I'm not sure which exactly gives the index of slide you just transitioned to, so I put in both for you.

var sliderIndex = 0;
window.mySwipe = new Swipe(document.getElementById('slider'), {
  callback: function(index, elem) {
      if (index < sliderIndex) {
         //backwards 
      }else{
         //forwards
      }
      sliderIndex = index;
  },
  transitionEnd: function(index, elem) {
      if (index < sliderIndex) {
         //backwards 
      }else{
         //forwards
      }
      sliderIndex = index;
  }
});

Upvotes: 2

Related Questions