Js library allows a scroller inside of a scroller with controls

JavaScript
1

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?