I am trying to set up two carousels on my page, but I can’t control them separately, when I press the navigation buttons, it moves both carousels. Any ideas? Do I have to change something in the css file? Or what is the right command to run both carousels with the same jquery?
my html code is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="stylesheets/reset.css" rel="stylesheet" type="text/css" /> <link href="stylesheets/main_css.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="scripts/browser-compatibility.js"></script> <script type="text/javascript" src="scripts/jquery.js"></script> <script type="text/javascript" src="widget/lib/jquery.ui.core.min.js"></script> <script type="text/javascript" src="widget/lib/jquery.ui.widget.min.js"></script> <script type="text/javascript" src="widget/lib/jquery.ui.rcarousel.min.js"></script> <link type="text/css" rel="stylesheet" href="widget/css/rcarousel.css" /> <link rel="stylesheet" type="text/css" href="widget/css/style.css" /> <script type="text/javascript" src="widget/lib/carous.js"></script> </head> <body> <div id="container"> <div id="carousel" class="carousel_pfi cf"> <div id="slide01" class="slide"> <img src="images/placeholder_crs.png" /> <div class="text"> <h1>continuous carousel continuous carousel continuous carousel continuous carousel continuous carousel</h1> <p>driven by jQuon a pageon a pageon a pageery UI</p> </div> </div> <div id="slide02" class="slide"> <img src="images/placeholder_crs.png" /> <div class="text"> <h1>any content continuous carousel continuous carousel continuous carousel continuous carousel continuous carousel</h1> <p>from images ton a pageon a pageon a pageo any HTML element</p> </div> </div> <div id="slide03" class="slide"> <img src="images/placeholder_crs.png" /> <div class="text"> <h1>horizontal and vertical continuous carousel continuous carousel continuous carousel continuous carousel continuous carousel</h1> <p>carousels just onon a pageon a pageon a pageon a pagee click away</p> </div> </div> <div id="slide04" class="slide"> <img src="images/placeholder_crs.png" /> <div class="text"> <h1>multi carousels</h1> <p>on a pageon a pageon a pageon a pageon a pageon a page</p> </div> </div> <div id="slide05" class="slide"> <img src="images/placeholder_crs.png" /> <div class="text"> <h1>highly customizabl continuous carousel continuous carousel continuous carousel continuous carousel continuous carousele</h1> <p>style it whaton a pageon a pageon a pageever you like</p> </div> </div> <div id="slide06" class="slide"> <img src="images/placeholder_crs.png" /> <div class="text"> <h1>multi browser support</h1> <p>supports even old browsers</p> </div> </div> </div> <a href="#" id="ui-carousel-next"></a> <a href="#" id="ui-carousel-prev"></a> <div id="pages"></div> </div> <div id="container"> <div id="carousel2" class="carousel_pfi cf"> <div id="slide011" class="slide"> <img src="images/placeholder_crs.png" /> <div class="text"> <h1>continuous carousel continuous carousel continuous carousel continuous carousel continuous carousel</h1> <p>driven by jQuon a pageon a pageon a pageery UI</p> </div> </div> <div id="slide022" class="slide"> <img src="images/placeholder_crs.png" /> <div class="text"> <h1>any content continuous carousel continuous carousel continuous carousel continuous carousel continuous carousel</h1> <p>from images ton a pageon a pageon a pageo any HTML element</p> </div> </div> <div id="slide033" class="slide"> <img src="images/placeholder_crs.png" /> <div class="text"> <h1>horizontal and vertical continuous carousel continuous carousel continuous carousel continuous carousel continuous carousel</h1> <p>carousels just onon a pageon a pageon a pageon a pagee click away</p> </div> </div> <div id="slide044" class="slide"> <img src="images/placeholder_crs.png" /> <div class="text"> <h1>multi carousels</h1> <p>on a pageon a pageon a pageon a pageon a pageon a page</p> </div> </div> <div id="slide055" class="slide"> <img src="images/placeholder_crs.png" /> <div class="text"> <h1>highly customizabl continuous carousel continuous carousel continuous carousel continuous carousel continuous carousele</h1> <p>style it whaton a pageon a pageon a pageever you like</p> </div> </div> <div id="slide066" class="slide"> <img src="images/placeholder_crs.png" /> <div class="text"> <h1>multi browser support</h1> <p>supports even old browsers</p> </div> </div> </div> <a href="#" id="ui-carousel-next2"></a> <a href="#" id="ui-carousel-prev2"></a> <div id="pages2"></div> </div> </body> </html>
my carous.js script:
jQuery(function($) { function generatePages() { var _total, i, _link; _total = $( "#carousel, #carousel2").rcarousel( "getTotalPages" ); for ( i = 0; i < _total; i++ ) { _link = $( "<a href='#'></a>" ); $(_link) .bind("click", {page: i}, function( event ) { $( "#carousel, #carousel2").rcarousel( "goToPage", event.data.page ); event.preventDefault(); } ) .addClass( "bullet off" ) .appendTo( "#pages, #pages2" ); } // mark first page as active $( "a:eq(0)", "#pages, #pages2" ) .removeClass( "off" ) .addClass( "on" ) .css( "background-image", "url(images/page-on.png)" ); } function pageLoaded( event, data ) { $( "a.on", "#pages, #pages2" ) .removeClass( "on" ) .css( "background-image", "url(images/page-off.png)" ); $( "a", "#pages, #pages2" ) .eq( data.page ) .addClass( "on" ) .css( "background-image", "url(images/page-on.png)" ); } $("#carousel, #carousel2").rcarousel( { visible: 4, step: 1, speed: 700, auto: { enabled: true }, width: 288, height: 250, start: generatePages, margin: 0, pageLoaded: pageLoaded } ); $( "#ui-carousel-next, #ui-carousel2-next" ) .add( "#ui-carousel-prev, #ui-carousel2-prev" ) .add( ".bullet" ) .hover( function() { $( this ).css( "opacity", 0.7 ); }, function() { $( this ).css( "opacity", 1.0 ); } ); });