I’m using Jquery and Flowplayer Scrollable and also the Jquery Carousel libraries.
What I have is a scroller area that contains 2 items.
Inside the scroller in each item is another scroller that has 6 images in it.
The code i use to initialize the carousels is:
$(function(){
// initialize scrollable - the outer scrollbar
$(".scrollable").scrollable();
$("div.foo").carousel({loop: true, autoSlide: true, autoSlideInterval: 1000, delayAutoSlide: 500});
$("div.foo2").carousel({loop: true, autoSlide: true, autoSlideInterval: 1000, delayAutoSlide: 500});
});
And it works great, but there is one problem. Both carousels are playing at the same time.
I only want the one visible on the screen to be playing and the other one i want to be paused.
Any ideas what code i can use to control the inner scrollers?