革命滑块播放只有当滑块是可见的在浏览器窗口

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

本文关键字：窗口 浏览器 播放 革命      更新时间：2023-09-26

页面上有两个滑块。第一个总是在页面加载时可见(在顶部)，第二个在页面底部。

我需要使第二个滑块只在可见时开始播放(在滚动条上)。我从开发者那里得到了一个答案:

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

我已经尝试使用这个代码(我已经将revapi1更改为我的滑块id)，但它似乎不起作用。

有没有人有一个工作的解决方案，或者可以帮助我修复我目前拥有的代码?

你必须检查滑块是否在视口中

$(window).scroll(function() {
  var windowPosition = $(window).scrollTop();
  var slidePosition = $("#your-slide").offset().top;
  if (slidePosition < windowPosition) {
    // add code here to play slider
  }
}
相关文章：