title: Revolution Slider play only when the slider is visible in the browser window
body: <p>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.</p>
  
  <p>I need to make the second slider start playing only when is visible (on a scroll).
  I got <a href="http://www.themepunch.com/home/plugins/wordpress-plugins/revolution-slider-wordpress/api-example-pauseresume-the-slider-on-page-scroll/" rel="nofollow">an answer from the developers</a>:</p>
  
  <pre><code>(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 &lt;= scrTop + winHeight &amp;&amp; offset + sliderHeight &gt;= scrTop) {
  
              if(sliderPaused) slider.revresume();
              sliderPaused = false;
          } else {
              if(!sliderPaused) slider.revpause();
              sliderPaused = true;
          }
      }
  })();
  </code></pre>
  
  <p>I have tried to use this code (I changed <code>revapi1</code> to my slider id already), but it doesn't seem to work.</p>
  
  <p>Does anybody have a working solution or can help me fix the code I currently have?</p>