ryrych / rcarousel

yet another jQuery UI carousel
http://ryrych.github.com/rcarousel/
172 stars 48 forks source link

Pause autoscroll #33

Open howardk opened 12 years ago

howardk commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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

liammapson commented 12 years ago

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

i have two buttons within my html:

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 commented 12 years ago

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 commented 10 years ago

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