I'd like to set two timers in the jcarouselLITE (take note - not jcarousel). Ideally the first three slides should have timeout:1000, and the forth should have timeout:8000. The following code grabs the index of the current slider and changes the var variablex
accordingly with the afterEnd
function:
var variablex;
$('.slideshow').jCarouselLite({
auto: true,
afterEnd: function(a){
var index = $(a[0]).index();
if (index == 3) {
variablex = 8000;
}
else {variablex = 1000;}
},
timeout: variablex;
});
I realise that the jCarouselLite function won't keep checking the value for timeout
- is there some way to assign values to a variable outside the loop with js?
The jcarousellite script can be found here: github
This is just a raw idea, so it might not work as desired.
var slideshowTimeout = 1000;
var $slideShow = $('.slideshow');
var slideshowCount = $slideShow.find('li').length +3;
var isSlowedDown = false;
$slideShow.jCarouselLite({
auto: true,
timeout: slideshowTimeout,
afterEnd: function(a){
var index = $(a[0]).index();
if (index === slideshowCount && isSlowedDown === false) {
slideshowTimeout = 4000;
isSlowedDown = true;
$slideShow.trigger("endCarousel")
$slideShow.jCarouselLite({
auto: true,
timeout: slideshowTimeout,
start: slideshowCount
});
}
},
});
Example: http://jsfiddle.net/e2e4V/1/