CODEWITHSUNDEEP
jquerydoublecarouseljcarousel
SMH_TBZ
SMH_TBZ

Reputation: 103

two carousels on a page not working

I am trying to set up two carousels on my page, but i cannot control each separately, when I click on nav buttons, it moves both carousels. any idea? Should I change something in css file? Or what is the right command to run both carousels with one jquery?

my html code:

     <!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 );
                        }
                    );
            });

Upvotes: 4

Views: 3148

Answers (1)

Getz
Getz

Reputation: 4063

As oske says, you have some elements with the same id in the page, which is a bad practice. The id must be unique. Maybe it's not the problem here, but you should use different id for your nav link:

   <a href="#" id="ui-carousel-next"></a>
   <a href="#" id="ui-carousel-prev"></a>

and

   <a href="#" id="ui-carousel-next2"></a>
   <a href="#" id="ui-carousel-prev2"></a>

Edit:

So you can see this link (https://github.com/ryrych/rcarousel/issues/13), the guy has the same problem. It seems that you have to declare the both carrousel separately in your js file, and give them the previous and next id link:

$("#carousel").rcarousel({
visible: 4,
step: 1,
speed: 700,
auto: {
  enabled: true
},
width: 288,
height: 250,
start: generatePages,
margin: 0,
pageLoaded: pageLoaded
navigation: {
   prev: "#ui-carousel-prev",
   next: "#ui-carousel-next"
}
});

$("#carouse2").rcarousel({
visible: 4,
step: 1,
speed: 700,
auto: {
  enabled: true
},
width: 288,
height: 250,
start: generatePages,
margin: 0,
pageLoaded: pageLoaded
navigation: {
   prev: "#ui-carousel2-prev",
   next: "#ui-carousel2-next"
}
});

Upvotes: 5

Related Questions