SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQuery Delay on sliders

    I have 3 sliders on my home page and I would like to make them start one after the other, so 1st would start immediately, then after a short delay the second one, and later the 3rd, so they don't make the transition at the same time. The slider I am using is Avia Slider http://aviathemes.com/aviaslider/

    Trying this code but they are still running synchronously:

    Code:
    // 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
    });
    How can I achieve what I need?

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,052
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Code JAVASCRIPT:
    // 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
    });
     
    setTimeout(funtion() {
    	// 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);
     
    setTimeout(function() {
    	// avia slider activation for right-slider
    	$('#right-slider').aviaSlider({
    		blockSize: {height: 40, width:'full'},
    		display: 'topleft',
    		transition: 'fade',
    		betweenBlockDelay:150,
    		animationSpeed: 500,
    		switchMovement: false,
    		appendControlls:'#right-slider-controlls',
    		autorotationSpeed:3
    	});
    },1600);
    The only code I hate more than my own is everyone else's.

  3. #3
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I'm getting an error in the script, probably because that code is enclosed within this:

    $(document).ready(function(){

    });

    How can I fix it?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •