Slider Revolution WP
09.27.2016
Pause/Resume Slider on Scroll with jQuery WayPoints
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.
jQuery WayPoints is a cool open-source script that allows you to detect when an HTML element scrolls into and out of the page’s view. For example, if you happen to have a slider at the top of your page, with lots of other content below it, if the user scrolls the page, and the slider scrolls out of view, we can use WayPoints to pause the slider. And likewise, if the user scrolls back to the top of the page, we can use WayPoints to resume the slider once the slider is scrolled back into view.
Slider Revolution 4.5 introduced a new “Custom JavaScript” section inside the slider’s main settings page:
If you aren’t using version 4.5 or higher, click here for instructions about how to update the plugin.
To get started, download the WayPoints script. Once downloaded, inside the download source, upload the file named “waypoints.min.js” to your website using your favorite ftp program. A good place for it is to upload it inside the “wp-content” folder.
Next, add the waypoints script to your theme’s “header.php” file, directly before the closing “</head>” tag. Here’s an example:
|
1 2 3 |
<script src="https://www.website.com/wp-content/waypoints.min.js" type="text/javascript"></script> |
Next, head over to your slider’s main settings page, and open the “API functions” section. This is where you can get your “revapi” name that’s specific to your slider. The “revapi” name is highlighted in the screenshot below. We’ll use this in our custom WayPoints script.
Next, open the “CSS/JavaScript” option. We’ll be adding the WayPoints script to the “Custom JavaScript” section shown in the following screenshot:
Next, paste the following code into the “Custom JavaScript” section. After pasting the code, change the “revapi3” part on the very first line to whatever “revapi” name is being used for your slider (see above for getting your “revapi” name). Read the code’s comments if you’re interested in learning about the script, and you can also check out the WayPoints documentation here.
|
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 |
revapi3.on('revolution.slide.onloaded', function() { // slider reaches top of screen jQuery(this).waypoint(function(direction) { // slider scrolled into view if(direction === 'up') { jQuery(this).revresume(); } // slider scolled out of view else { jQuery(this).revpause(); } }, {offset: function() { return -jQuery(this).height(); // slider reaches bottom of screen }}).waypoint(function(direction) { // slider scrolled into view if(direction === 'down') { jQuery(this).revresume(); } // slider scrolled out of view else { jQuery(this).revpause(); } }, {offset: function() { return jQuery(window).height(); }}); }); |
Finally, scroll back up the slider’s settings page a bit and save your changes:
