Can rcarousel be switched out of auto advance mode dynamically?

Question

I'm using rcarousel in a page I am writing, which unfortunately I can't share as an example yet. But that shouldn't matter with regards to my question because my question isn't a bug, it's a feature existence inquiry.

I have 'auto' enabled at creation but I'd like to be able to disable it dynamically if a user clicks one of the nav buttons. Here is the creation of the carousel:

$("#landing-features-carousel").rcarousel({
    visible: 2,
    step: 2,
    speed: 700,
    width: 474,
    height: 267,
    auto: { enabled: true, interval: 8000 },
    start: window.landing.generateCarouselPages,
    pageLoaded: window.landing.carouselLoaded
});

And I'd like to be able to do something like this:

$("#ui-carousel-next").bind("click", function(e) {
    $("#landing-features-carousel").rcarousel("options", "auto", { enabled: false });
});

But of course that doesn't work.

Does anyone know if rcarousel can be switched out of auto advance mode dynamically? Thank you!

Answer 1

IIRC there was a kinda bug. Now I’m working on the next version in the testing branch and among other things I’ve implemented a nice API method to control the carousel – you can pause it and play whenever you feel like. I added a new example too.

As it is testing branch, I can’t say if it is stable. Though not too many commits have been made so if you feel brave enough, you can browse new commits and use the version.

Answer 2

In the latest version of rcarousel I was able to get the below to work with one caveat*

$("#ui-carousel-next").bind("click", function(e) {
    $("#landing-features-carousel").rcarousel("option", { auto: { enabled: false} });
});

*The caveat was that on click, the carousel still scrolled one more time after the click and then stopped.

This was annoying, so I wound up settling for stopping the auto on hover of the carousel div and prev/next buttons, which seemed to stop the carousel immediately:

$("#ui-carousel-next").hover(function () {
    $("#landing-features-carousel").rcarousel("option", { auto: { enabled: false} });
});

$("#ui-carousel-prev").hover(function () {
    $("#landing-features-carousel").rcarousel("option", { auto: { enabled: false} });
});

$("#landing-features-carousell").hover(function () {
    $("#landing-features-carousel").rcarousel("option", { auto: { enabled: false} });
});