Revolution Slider - Load slider when on screen only

Question

I have this site: http://362.a07.myftpupload.com/ The password is: aynhoe_park

I need to fix it so that the Revolution Sliders on each Section to only load when its scrolled onto. Can anyone suggest / give me some jQuery to force this to only start the sliders when the user is on the page with it. You will see that the site is a parallax and it has multiple sliders on the parallax.

I have tried this code below, from the people at Revolution Slider, which doesn't seem to work:

revapi5.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();

}});
});

So If someone can help me out that would be great! As I would love just one bit of code not one for each slider to force it to run the slider only when it is in the screen, not before hand.

Thanks in advance.

Chris

Answer 1

The code is so far correct. Please make sure that you change the "revapi5" against to the correct references.

If i check your site, i see revapi1, revapi2, revapi25, revapi26, revapi3, revapi4, ...28, ...29. No revapi5 which would exactly declare why this not working for you. Changing your example above from revapi5 to revapi1 i.e. would start/stop the First slider on the page dependent on the scroll position.

In case you wish to drive all your sliders in the page, you will need to add for each one an individual script based on the example above, or a script which takes care of all sliders in one go like this:

jQuery('.rev_slider').each(function() {  

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();

}});
});

hope this helps you further ?