Search code examples
jqueryjcarousellite

Is it possible to dynamically set the timeout in jcarousellite?


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


Solution

  • 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/