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.
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
});