Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #2913

    Here’s my situation, I’ve got 3 sliders arranged in columns near each other.

    Now I want the first column slider to start with the transition, then a second after the second column slider starts and so on. They will all have the same autorotationSpeed but I just want an initial delay offset so that they appear to load sequentially. How can I do that? Thanks

    #39775

    Hey,

    you can try the jquery delay function: http://api.jquery.com/delay/

    Use it like:

    <script type='text/javascript'>
    $('#-fade-slider').delay(800).aviaSlider();
    </script>

    #39776

    Trying this code but they are still running synchronously:

    // avia slider activation for left-slider

    $(‘#left-slider’).aviaSlider({

    blockSize: {height: 40, width:’full’},

    display: ‘topleft’,

    transition: ‘fade’,

    betweenBlockDelay:150,

    animationSpeed: 500,

    switchMovement: false,

    appendControlls:’#left-slider-controlls’,

    autorotationSpeed:3

    });

    // avia slider activation for middle-slider

    $(‘#middle-slider’).delay(800).aviaSlider({

    blockSize: {height: 40, width:’full’},

    display: ‘topleft’,

    transition: ‘fade’,

    betweenBlockDelay:150,

    animationSpeed: 500,

    switchMovement: false,

    appendControlls:’#middle-slider-controlls’,

    autorotationSpeed:3

    });

    // avia slider activation for right-slider

    $(‘#right-slider’).delay(1600).aviaSlider({

    blockSize: {height: 40, width:’full’},

    display: ‘topleft’,

    transition: ‘fade’,

    betweenBlockDelay:150,

    animationSpeed: 500,

    switchMovement: false,

    appendControlls:’#right-slider-controlls’,

    autorotationSpeed:3

    });

    #39777

    any help please?

    #39778

    I must admit I’m not good at javascript coding so I can’t help you much. I’ll report this to Kriesi – maybe he can help you.

    #39779

    OK thanks, looking forward to a solution then.

    #39780

    unfortunatley the delay function wont work on this since it only works on the FX queue of jquery.

    what you can do however is to use the native setTimeout function of javascript: http://kooshmoose.blogspot.com/2007/06/javascript-setinterval-and-settimeout.html

    i think it should look something like this:

    setTimeout( function() {

    // avia slider activation for middle-slider

    $(‘#middle-slider’).aviaSlider({

    blockSize: {height: 40, width:’full’},

    display: ‘topleft’,

    transition: ‘fade’,

    betweenBlockDelay:150,

    animationSpeed: 500,

    switchMovement: false,

    appendControlls:’#middle-slider-controlls’,

    autorotationSpeed:3

    });

    } , 800)

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Avia Slider – Need to make an initial delay’ is closed to new replies.