I’m trying to use Mousewheel events to advance an instance of Revolution Slider. So, in addition to advancing with the nav and “continue” buttons built in to the slider, we need the ability for visitors to navigate through the six slide presentation by using their mouse scroll wheel to go either forwards or backwards.
The inherent problem with this is that each spin of the mousewheel produces several actual events … so you end up just scrolling through the whole lot of slides if you aggressively spin the wheel.
What we need is to remove the event listener right after the first event, and then reattach it again so it continues to “listen” for the next wheel event … each time there is a spin.
For the most part, the code I’m using is doing just that … there is just one glitch to sort out. It seems to lose focus if the visitor does anything with his mouse between mousewheel events. So, if he moves around the mouse as he’s reading, say, slide 3 … focus is lost and the event listener will ignore the next wheel event. If you visit my dev link (http://devonline.wpengine.com/story-2/) and start spinning the mousewheel you see how it’s almost working … and then it’s as if it dies. Once focus is lost, you can click a nav button to go to another slide and the mousewheel listener will again be active.
First off, I need to understand why it keeps losing focus … and then I need a way to alter the code to address that. Here’s what I have right now:
// 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
jQuery('html, body').off('DOMMouseScroll mousewheel').on('DOMMouseScroll mousewheel', onWheel);
}
function onWheel(event) {
// remove wheel listener as soon as wheel movement is detected
jQuery('html, body').off('DOMMouseScroll mousewheel');
event = event.originalEvent;
if(event.wheelDelta > 0 || event.detail < 0) {
revapi17.revprev();
}
else {
revapi17.revnext();
}
}
Thank you.