title: Multiple jCarousels one same page Issue
body: <p>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? </p>
  
  <p>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.</p>
  
  <p></p>
  
  <pre><code>    &lt;xsl:if test="count(//image) &amp;gt; 1"&gt;
          &lt;script type="text/javascript"&gt;
              &lt;xsl:text disable-output-escaping="yes"&gt;&lt;![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 &lt; ]]&gt;&lt;/xsl:text&gt;
              &lt;xsl:value-of select="count(//image) - 1"/&gt;
              &lt;xsl:text disable-output-escaping="yes"&gt;&lt;![CDATA[) {
                        carouselIndex = carouselIndex + 1;
                            drawCarousel(carouselIndex,1);
                        }
                        return false;
                    });
  
                jQuery('#rightCarousel-prev').bind('click', function() {
                    var carouselIndex = $('#rightCarousel').get(0).carouselIndex;
                    if (carouselIndex &gt; 1) {
                    carouselIndex = carouselIndex - 1;
                        drawCarousel(carouselIndex,-1);
                      }
                    return false;
                });
  
                });
      ]]&gt;&lt;/xsl:text&gt;
          &lt;/script&gt;
      &lt;/xsl:if&gt;
  
      &lt;div class="event_photos"&gt;
          &lt;div class="article"&gt;
              &lt;p class="date"&gt;
                  &lt;xsl:value-of select="ms:format-date(//@date, 'dd MMM, yyyy', $Locale)"/&gt;
              &lt;/p&gt;
              &lt;p class="legend"&gt;
                  &lt;a href="{//@url}"&gt;
                      &lt;xsl:value-of select="//summary"/&gt;
                  &lt;/a&gt;
              &lt;/p&gt;
              &lt;a href="{Urls:MakeFriendly(concat('/default.aspx?pid=29&amp;amp;la=',$LanguageID))}"&gt;
                  &lt;h2&gt;
                      &lt;xsl:value-of select="Resource:GetConstant('events')"/&gt;
                  &lt;/h2&gt;
              &lt;/a&gt;
  
              &lt;xsl:if test="count(//image) &amp;gt; 0"&gt;
                  &lt;div class="gallery-right"&gt;
  
                      &lt;div class="gal_cont" style="height: 190px;width:160px;overflow: hidden; position: relative;"&gt;
                          &lt;ul id="rightCarousel" style="{concat('height:190px;width: ',200*count(//image),'px; position: absolute;')}"&gt;
                              &lt;xsl:apply-templates select="//image" /&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
  
                      &lt;xsl:if test="count(//image) &amp;gt; 1"&gt;
                          &lt;div class="arrow-left"&gt;
                              &lt;a id="rightCarousel-prev" title="{Resource:GetConstant('events_previusPhotos')}" href="#"&gt;προηγούμενη&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/xsl:if&gt;
  
                      &lt;xsl:if test="count(//image) &amp;gt; 1"&gt;
                          &lt;div class="arrow-right"&gt;
                              &lt;a id="rightCarousel-next" title="{Resource:GetConstant('events_nextPhotos')}" href="#"&gt;επόμενη&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/xsl:if&gt;
  
                  &lt;/div&gt;
              &lt;/xsl:if&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/xsl:template&gt;
  
  &lt;xsl:template match="//image"&gt;
      &lt;xsl:if test="string-length(//image/@file) &amp;gt; 0"&gt;
          &lt;li class="img" style="display:inline;overflow: hidden;width:135px;margin:8px"&gt;
              &lt;img src="{Image:Fit(//image/@file,130,178)}" alt="{@title}" style="max-width:130px"/&gt;
          &lt;/li&gt;
      &lt;/xsl:if&gt;
  &lt;/xsl:template&gt;
  </code></pre>