CODEWITHSUNDEEP
javascriptjqueryhtmlfunctiondelay
YanO
YanO

Reputation: 87

Slider Function Delay

Im a novice and stuck on this, would appreciate your help A LOT.

I want the slider to flick through 4 images and then randomly stop on one, and hold for a few seconds, then flick through 4 again and randomly stop on another and keep going this way. Is this going to be very complicated?

Thanks in advance :)

Here is a link of it scrolling in jsfiddle.net/zFgz7/3/, the function only skips two pictures and stops on the 3rd, How can I get it to skip through 4 or 5 pictures and stop on the next one for 2 seconds?

jQuery(function($) {
    $(document).ready(function() {

        $('.slides').cycle({
            fx: 'none',
            speed: 80,
            timeout: 80,
            timeoutFn: calculateTimeout
        }).cycle("pause");

    }); // END doc ready
}); // END function

function calculateTimeout(currElement, nextElement, opts, isForward) {
    // here we set even number slides to have a 2 second timeout;
    // by returning false for odd number slides we let those slides
    // inherit the default timeout value (4 sec)
    var index = opts.currSlide;
    return index % 2 ? 2000 : false;
}

Upvotes: 2

Views: 151

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

Do it like this,

var myCounter = 0;
$('.slides').cycle({
    fx:     'none',
    speed:   80,
    timeout: 80,
    timeoutFn: calculateTimeout
}).cycle("pause");

function calculateTimeout( currElement, nextElement, opts, isForward) { 
    // here we set even number slides to have a 2 second timeout; 
    // by returning false for odd number slides we let those slides 
    // inherit the default timeout value (4 sec) 
    myCounter++; 
    return myCounter % 5 ? 50 : 2000; 
}

(make sure the myCounter variable and the calculateTimeout method are in the same scope so that the method has access to the variable)

Demo at http://jsfiddle.net/gaby/zFgz7/4/

Upvotes: 3

Related Questions