Categories
javascript jquery revolution-slider wordpress

Revolution Slider play only when the slider is visible in the browser window

I have two sliders on the page.
First one is always visible on page load (in the top), second one is at the bottom of the page.

I need to make the second slider start playing only when is visible (on a scroll).
I got an answer from the developers:

(function() {
var win, slider, sliderHeight, sliderPaused, winHeight;
// Change the "revapi1" part here to whatever "revapi" name that your slider uses
slider = revapi1.on('revolution.slide.onloaded', function() {
win = jQuery(window).on('scroll', checkScroll).on('resize', sizer);
sizer();
});
function sizer() {
sliderHeight = slider.height();
winHeight = win.height();
checkScroll();
}
function checkScroll() {
var scrTop = win.scrollTop(),
offset = slider.offset().top;
if(offset <= scrTop + winHeight && offset + sliderHeight >= scrTop) {
if(sliderPaused) slider.revresume();
sliderPaused = false;
} else {
if(!sliderPaused) slider.revpause();
sliderPaused = true;
}
}
})();

I have tried to use this code (I changed revapi1 to my slider id already), but it doesn’t seem to work.

Does anybody have a working solution or can help me fix the code I currently have?