jQuery CarouFredSel plugin triggering a configuration

Question

i have a little problem, everything i think quite good, example is here: a link at bottom of page "Partneriai". The idea is when on mouse over and out on next and previous buttons set a speed (duration) a little bit faster, and when mouse out set speed duration normal (default).

And it's everything working, but the problem is : need to wait when one item is slide over from div, and then is setting a configuration of duration. I need immediately when mouse over, out at next,prev button and set those configuration. I can't find issue.

My code:

$(".sponsors-slider-slide").carouFredSel({
    scroll: {
        items: 1,
        duration: 2000,
        queue: true,
        timeoutDuration: 0,
        easing: "linear",
        pauseOnHover: "immediate-resume",
        fx: "scroll"
    },
    responsive: false,
    circular: true,
    infinite: false,
    swipe: {
        onTouch: true,
        onMouse: true
    },
    width: "variable",
    height: "variable",
    items: {
        visible: 4,
        minimum: 0,
        width: "variable",
        height: "variable"
    },
    align: false,
    debug: false
});

and example of next button:

$("#sponsors-slider-next").on("mouseover mouseout", function(e){

    if(e.type == "mouseover")
    {

        $(".sponsors-slider-slide").trigger("configuration", ["direction", "left"]);
        $(".sponsors-slider-slide").trigger("configuration", ["scroll.duration", 1000, true]);

    }

    if(e.type == "mouseout")
    {
        $(".sponsors-slider-slide").trigger("configuration", ["direction", "left"]);
        $(".sponsors-slider-slide").trigger("configuration", ["scroll.duration", 2500, true]);
    }



    return false;
});

The question is, how to set scroll.duration when mouseover immediately on next button, not when carousel is finish slide ?

Thanks in advice.

Answer 1

It has to finish the transition before it can change configurations. To finish the transition immediately, trigger the finish event.

$(".sponsors-slider-slide").trigger('finish');

Depending on other settings, this may make it look a bit "glitchy", but at least it doesn't give the impression that the buttons aren't working.

BTW, it would be more efficient to chain multiple methods rather than repeat selectors:

$(".sponsors-slider-slide")
    .trigger("finish")
    .trigger("configuration", {
        direction: "left",
        scroll: {
            duration: 1000
        },
        reInit: true //not sure that you need this
    });