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

2 Views

I have two sliders on the page.
First one is always visible on page load (in the top), second one is at the bottom of the page.

I need to make the second slider start playing only when is visible (on a scroll).
I got an answer from the developers:

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

I have tried to use this code (I changed revapi1 to my slider id already), but it doesn’t seem to work.

Does anybody have a working solution or can help me fix the code I currently have?

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. You have to check if the slider is in the viewport.

    $(window).scroll(function() {
  var windowPosition = $(window).scrollTop();
  var slidePosition = $("#your-slide").offset().top;

  if (slidePosition < windowPosition) {
    // add code here to play slider
  }
}