I have a page with a full screen revolution slider on it. I need for the slides to advance on the scroll wheel. The code I have below uses the scroll event (not mousewheel) to advance through the slides but has one inherent problem. If you really spin the mousewheel, it will scroll through the entire deck all at once and you really can't control where you end up. I was hoping to remove the listener once one use of the scroll wheel has been detected and then add it again right after the slide changes ... something like that ... I'm only guessing ... or maybe it could somehow constrain the scroll event to one click?
What I have now in my document ready code block:
$(function(){
var _top = $(window).scrollTop();
var _direction;
$(window).scroll(function(){
var _cur_top = $(window).scrollTop();
if(_top < _cur_top)
{
revapi17.revnext();;
}
else
{
revapi17.revprev();;
}
_top = _cur_top;
console.log(_direction);
});
Reference for revolution slider API: http://clapat.ro/themes/creative/doc/rev-documentation.html#!/publicapi
dev URL: http://devonline.wpengine.com/story-2/
UPDATE: Thanks everyone. I found a solution:
// bounce if slider isn't present on the page if(typeof revapi17 === 'undefined') return;
// add wheel listener when slide changes revapi17.on('revolution.slide.onchange', onChange);
function onChange() {
// remove wheel listener before adding it to ensure event only fires once
revapi17.off('DOMMouseScroll mousewheel').on('DOMMouseScroll mousewheel', onWheel);
}
function onWheel(event) {
// remove wheel listener as soon as wheel movement is detected
revapi17.off('DOMMouseScroll mousewheel');
event = event.originalEvent;
if(event.wheelDelta > 0 || event.detail < 0) {
revapi17.revprev();
}
else {
revapi17.revnext();
}
}