Slider Revolution WP
09.27.2016
API Example – Pause/Resume the slider on page scroll
This article is now outdated!
For version 5.0+, this can now be easily achieved with the “Stop Slider out of Viewport” option shown here.
This example shows how you can toggle the slider’s “play” state based on whether the slider is visible on the page or not.
If you already have some type of “window scroll” script, you can integrate parts of the example into your current script. Otherwise, add the example script below to the slider’s Custom JavaScript section.
Before starting, it will be important to find your slider’s “API Name”. You can find this in your slider’s API Section, in the slider’s main settings page. Once you get your slider’s “revapi” name, replace the “revapi1” part in the beginning of the script below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
(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; } } })(); |
