Multiple jCarousels one same page Issue

I am using two jcarousels one the same page and only one of them works.for the second one that is placed (after the first one)on the footer of the page the prev-next buttons just perform the default action and navigate to the home page.(even when i used the prevent default method for jquery the button does nothing) I discovered this while i was trying to make a third one on the sidebar of the page, and by giving the same div ids with the first one(as itried to use the same piece of code), the latter one would navigate the new one i tried to insert. Is there a way of distinguishing the carousels so that both function correctly?

sorry for the misleading explanation of my problem. for the first two carousels you are correct,theu should not have the sam eids.the third one i tried to add, i wrote the html and js code with different elements and the one i added does not work. I provide the code above.

    <xsl:if test="count(//image) &gt; 1">
        <script type="text/javascript">
            <xsl:text disable-output-escaping="yes"><![CDATA[
      function drawCarousel(index,position) {
        $('#rightCarousel').stop(true, false);
        $('#rightCarousel').animate({left: -130*(index-1)}, 500);
        $('#rightCarousel').get(0).carouselIndex = index;
      }

      jQuery(document).ready(function() {
      var carouselIndex = 1;
      $('#rightCarousel').get(0).carouselIndex = carouselIndex;

      jQuery('#rightCarousel-next').bind('click', function() {
      var carouselIndex = $('#rightCarousel').get(0).carouselIndex;
      if (carouselIndex < ]]></xsl:text>
            <xsl:value-of select="count(//image) - 1"/>
            <xsl:text disable-output-escaping="yes"><![CDATA[) {
                      carouselIndex = carouselIndex + 1;
                          drawCarousel(carouselIndex,1);
                      }
                      return false;
                  });

              jQuery('#rightCarousel-prev').bind('click', function() {
                  var carouselIndex = $('#rightCarousel').get(0).carouselIndex;
                  if (carouselIndex > 1) {
                  carouselIndex = carouselIndex - 1;
                      drawCarousel(carouselIndex,-1);
                    }
                  return false;
              });

              });
    ]]></xsl:text>
        </script>
    </xsl:if>

    <div class="event_photos">
        <div class="article">
            <p class="date">
                <xsl:value-of select="ms:format-date(//@date, 'dd MMM, yyyy', $Locale)"/>
            </p>
            <p class="legend">
                <a href="{//@url}">
                    <xsl:value-of select="//summary"/>
                </a>
            </p>
            <a href="{Urls:MakeFriendly(concat('/default.aspx?pid=29&amp;la=',$LanguageID))}">
                <h2>
                    <xsl:value-of select="Resource:GetConstant('events')"/>
                </h2>
            </a>

            <xsl:if test="count(//image) &gt; 0">
                <div class="gallery-right">

                    <div class="gal_cont" style="height: 190px;width:160px;overflow: hidden; position: relative;">
                  开发者_如何学JAVA      <ul id="rightCarousel" style="{concat('height:190px;width: ',200*count(//image),'px; position: absolute;')}">
                            <xsl:apply-templates select="//image" />
                        </ul>
                    </div>

                    <xsl:if test="count(//image) &gt; 1">
                        <div class="arrow-left">
                            <a id="rightCarousel-prev" title="{Resource:GetConstant('events_previusPhotos')}" href="#">προηγούμενη</a>
                        </div>
                    </xsl:if>

                    <xsl:if test="count(//image) &gt; 1">
                        <div class="arrow-right">
                            <a id="rightCarousel-next" title="{Resource:GetConstant('events_nextPhotos')}" href="#">επόμενη</a>
                        </div>
                    </xsl:if>

                </div>
            </xsl:if>
        </div>
    </div>
</xsl:template>

<xsl:template match="//image">
    <xsl:if test="string-length(//image/@file) &gt; 0">
        <li class="img" style="display:inline;overflow: hidden;width:135px;margin:8px">
            <img src="{Image:Fit(//image/@file,130,178)}" alt="{@title}" style="max-width:130px"/>
        </li>
    </xsl:if>
</xsl:template>

They need different IDs - an ID is designed to be a unique identifier, so you may only have one per page.

Look closely at the code on the sample page: http://sorgalla.com/projects/jcarousel/examples/static_multiple.html

You will see that each carousel has a unique identifier (first-carousel, second-carousel, etc).

Edit; Just saw your edit about the carousel being custom, so perhaps the sorgalla project isn't directly helpful. In any case, the IDs should still be unique.

I have implemented multiple carousel elements on the same page using the jcarousel plugin here. Initially I had 3 on the same page without any issues. You cannot have the same id for more than one element on the page

Thank you very much for your help.The problem was that in this implementation of the carousel not only the elements must have different ids, but also the javascript variables and functions for each different carousel.after this it works fine.

It also appears that the carousel doesn't initialize if it's in a hidden block - display: none;.