Pause autoscroll #33

Open
howardk opened this Issue Apr 25, 2012 · 5 comments

Projects

None yet

4 participants

@howardk
howardk commented Apr 25, 2012

Would it be possible to add an additional navigation option for "pause". I noticed that the scrolling does automatically pause on hover, but it would be nice to be able to create a "pause" control like "next" and "prev".

@ryrych
Owner
ryrych commented Apr 27, 2012

Thanks for the suggestion! Sounds interesting.
But I can’t promise you when it’s done cause I don’t have much time now.

@howardk
howardk commented Apr 27, 2012

Understood. The pause on hover works well enough for now.

@liammapson

I have devised a solution for pause/play which might meet your needs:

i have two buttons within my html:

pause
play

then within jQuery(function($) I added the following:

    $("#pause")
      .bind("click",
        function( event ) {
          $("#carousel").mouseenter();
          $("#carousel").rcarousel( "option",{auto: {enabled:false}} );
        }
      )

    $("#play")
      .bind("click",
        function( event ) {
          $("#carousel").rcarousel( "option",{auto: {enabled:true,direction:"next",interval:5000}} );
          $("#carousel").mouseleave();
        }
      )

that's it!

I figured this out after looking at jquery.ui.rcarousel.js and seeing where the carousel was created and functions bound to the hover event for the carousel. (search for $root.hover if interested)

anyway here's what's going on in my solution:
When I click 'pause' button, I want to trigger 'mouseenter' for rcarousel which will fire the 'hover' mouseenter event bound to the carousel in jquery.ui.rcarousel.js.
When I click 'play' button, I want to trigger 'mouseleave' for rcarousel which will fire the 'hover' mouseleave event bound to the carousel in jquery.ui.rcarousel.js.

You might think these two steps alone might be enough to get the desired behavior but remember these states can still be altered by actually hovering over the carousel. That is to say that even though you have successfully paused the carousel by clicking 'pause', you can start the scrolling again by merely mousing over the carousel because the mouseleave function bound to the carousel will re-enable the scroll. So that's why I added the extra steps of disabling autoscroll when pause is clicked and re-enable autoscroll when play is clicked.

This should be painfully obvious but I just thought I would try to offer a little explanation just in case.
I hope this helps someone and many thanks to ryrych for his awesome plugin.

@ryrych
Owner
ryrych commented May 30, 2012

Thanks for taking your time! Some time ago I added a new API method to control autoplay – and it’s called ‘autoplay’. It’s in the testing branch and you can have a look at the example page I also added.

But indeed, nice workaround! :)

@rohith-kumar

How can i add mouse scroll event for previous and next ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment