Stop BXSlider on window scroll

Question

I am looking for a way to pause my BSXlider carousel when the user scrolls the page. Is this possible? Been looking at using the slider.stopAuto() command - but it doesnt work? I get Firebug errors when I try and use it...

BXSlider code call is:

var slider = $('.bxslider').bxSlider({
mode: 'horizontal', 
auto:true,
speed: 1000,
pause: 3500,
controls:true,
pager: false,
keyboardEnabled: true
}); 

then I was attempting to use

$(document).scroll(function(){
      slider = $('.bxslider').bxSlider();
      slider.stopAuto();
      return false;
});

Any ideas? I also want the slider to restart auto play when scrolling has finished...

Cheers

dubbs.

Answer 1

In your window scroll set the start and stop after a slight delay.

 $(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    slider.stopAuto();

    $.data(this, 'scrollTimer', setTimeout(function() {
      slider.startAuto();
      return false;

    }, 250));
  });

Taken from:

https://stackoverflow.com/a/14092859

Here is a full example:

http://plnkr.co/edit/Z0ThJJo66MnMyDw2UVY5?p=preview

Right now it checks if the scrolling has stopped after 250 ms. If it has stopped, then it calls stopAuto(). You can adjust the MS for the delay to suit your needs.

Originally, I thought maybe a callback might work, but I think just the scroll event is all you need.

This BXslider event callback is not necessary but I include it for completeness:

onSlideAfter: function(){
    // if scrolling stop
   if (isScrolling){
       slider.stopAuto();
   }    
   // else continue
   else{
       slider.startAuto();
   }
  }