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:
// 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?