Question

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

Answer 1

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/