Multiple carousel animation on a page

[Angel Garcia]

I have a page with many animated carousels by the following function:

function menusAnimation () {
var onDelay = function(){
$('[data-role="__carousel"]').each(function() { Apperyio($(this).attr('dsid')).carouselRoot.carousel("next"); } );
};

Code: Select all

 window.clearInterval(self.carouselTimer); 
 self.carouselTimer = window.setInterval(onDelay, (Math.floor(Math.random() * (10-3+1)) + 3)*1000); 

}

Is the only way to make working all carousels (what I know). Is any way to change random value on each iteration?

Could I execute different instances of this function for each carousel to avoid synchronism between carousels (all carousels have the same ID because I create it depending a REST response)?

[Pavel Zarudniy]

Hi Angel,
You can set delay time for each carousel separately by creating new timer to each other in function each