Reputation: 7835
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
Reputation: 332
Check API docs for slideNextTransitionStart, slideNextTransitionEnd, slidePrevTransitionStart, slidePrevTransitionEnd
Upvotes: 0
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