CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Atif Azad
Atif Azad

Reputation: 737

How to Pause Sliding Image and Slide it again after a certain time

//S1
$('#s1').cycle({
    fx: 'scrollDown',
    speed: 500,
    timeout: 1000,

});

//S2
$('#s2').cycle({
    fx: 'scrollDown',
    speed: 500,
    timeout: 2000
});


//S3
$('#s3').cycle({
    fx: 'scrollDown',
    speed: 500,
    timeout: 3000
});

JSFiddle

I have three sliders. I want to slide them one by one. After 1st slide scroll, it should be pause till 3rd slider scroll. Any help on how can I do this?

Upvotes: 1

Views: 102

Answers (3)

Mr_Green
Mr_Green

Reputation: 41832

Small Modifications to @NicolaeOlariu's answer

function applyAnimeScroll(a, b, c) {
    return {
        fx: 'scrollDown',
        speed: 500,
        timeout: 1000,
        after: function () {
            $('#s1').cycle(a);
            $('#s2').cycle(b);
            $('#s3').cycle(c);
        }
    };
}

var s1 = $('#s1').cycle(applyAnimeScroll('pause', 'resume', 'pause'));
var s2 = $('#s2').cycle(applyAnimeScroll('pause', 'pause', 'resume'));
var s3 = $('#s3').cycle(applyAnimeScroll('resume', 'pause', 'pause'));

Working Fiddle

Upvotes: 2

Nicolae Olariu
Nicolae Olariu

Reputation: 2555

Have a look at the following source code. It's using jquery.cycle's internal events to pause/resume the other sliders. I think it's more robust than using simple delays (which seems to cause some disturbance after a while).

//S1
var s1 = $('#s1').cycle({ 
    fx: 'scrollDown',
    speed:    500,
    timeout: 500,
    after: function() {
        $('#s1').cycle('pause'); // when slider1 finishes one slide, pause it
        $('#s2').cycle('resume'); // resume next slider, in this case, slider2
    }
});

//S2
var s2 = $('#s2').cycle({ 
    fx: 'scrollDown',
    speed:    500,
    timeout: 500,
    after: function() {
        $('#s2').cycle('pause'); // when slider2 finishes one slide, pause it
        $('#s3').cycle('resume'); // resume next slider, in this case, slider3
    }
});
s2.cycle('pause'); // by default pause slider2

//S3
var s3 = $('#s3').cycle({ 
    fx: 'scrollDown',
    speed:    500,
    timeout: 500,
    after: function() {
        $('#s3').cycle('pause'); // when slider3 finishes one slide, pause it
        $('#s1').cycle('resume'); // resume next slider, in this case, slider1
    }
});
s3.cycle('pause'); // by default pause slider3

I've also bundled up a fiddle.

Upvotes: 2

Pranav
Pranav

Reputation: 666

Use delay property.

$('#s1').cycle({ 
    fx: 'scrollDown',
    speed:    500, 
    delay : -5000

});

//S2
$('#s2').cycle({ 
    fx: 'scrollDown',
    speed:    500, 
    delay : -3000
});


//S3
$('#s3').cycle({ 
    fx: 'scrollDown',
    speed:    500, 
    delay:-2000
});

Working Fiddle

Upvotes: 3

Related Questions