Multiple carousels on one page

[caos-es-12]

Hello,

I am having a problem with two carousels on one page. I Pressing the arrows in the first one, moves both carousels. And when I pressing the arrows in the second one, nothing happens but goes to the top of the page. Something am I doing wrong?

These are the calling functions:

jQuery(function( $ ) {
$("#carousel").rcarousel({
visible: 1,
step: 1,
width: 915, 
height: 440,
auto: { enabled: true },
start: generatePages,
pageLoaded: pageLoaded

});

$("#carousel_2").rcarousel({ visible: 3, step: 1, width: 281, height: 136 });

$( "#ui-carousel-next" )
.add( "#ui-carousel-prev" )
.hover(
function() {
$( this ).css( "opacity", 0.7 );
},
function() {
$( this ).css( "opacity", 1.0 );
}
);

$( "#banner-carousel-next" )
.add( "#banner-carousel-prev" )
.hover(
function() {
$( this ).css( "opacity", 0.7 );
},
function() {
$( this ).css( "opacity", 1.0 );
}
);

Thanks a lot! Regards. Carlos

[caos-es-12]

Ok, problem is fixed. It was my mistake. After reading the documentation carefully, I've found out I had to set up the navigations id properties for the second carousel. Now everything works properly. Thanks!

$("#carousel_2").rcarousel({ visible: 3, step: 1, width: 281, height: 136, navigation: { prev: "#banner-carousel-prev", next: "#banner-carousel-next" } });