javascript - Revolution Slider - 仅在屏幕上时加载 slider

Question

我有这个网站: http://362.a07.myftpupload.com/ 密码是:aynhoe_park

我需要修复它，以便每个部分上的革命 slider 仅在滚动时加载。任何人都可以建议/给我一些 jQuery 来强制它仅在用户位于页面上时启动 slider 。您将看到该网站是一个视差，并且在视差上有多个 slider 。

我尝试了下面这段代码，来自 Revolution Slider 的人员，但似乎不起作用:

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

}});
});

如果有人能帮助我那就太好了!因为我只喜欢一点代码，而不是每个 slider 一个代码，以强制它仅在 slider 位于屏幕中时而不是在手之前运行 slider 。

提前致谢。

克里斯

Answer 1

到目前为止，代码是正确的。请确保将“revapi5”更改为正确的引用。

如果我检查您的网站，我会看到 revapi1、revapi2、revapi25、revapi26、revapi3、revapi4、...28、...29。没有 revapi5 可以准确地声明为什么这不适合你。将上面的示例从 revapi5 更改为 revapi1，即根据滚动位置启动/停止页面上的第一个 slider 。

如果您希望驱动页面中的所有 slider ，则需要根据上面的示例为每个 slider 添加一个单独的脚本，或者一个一次性处理所有 slider 的脚本，如下所示:

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

}});
});

希望这对您有进一步帮助？