Несколько jCarousels одна и та же страница Проблема

Question

Я использую две jcarousels одну и ту же страницу, и только одна из них работает. Для второй, которая помещена (после первой) на нижнем колонтитуле страницы, следующие кнопки просто выполните действие по умолчанию и перейдите к домашней странице (даже если я использовал метод предотвращения по умолчанию для jquery, кнопка ничего не делает) Я обнаружил это, пока я пытался сделать третий на боковой панели страницы, и давая те же самые div id с первым (поскольку он используется для использования одного и того же фрагмента кода), последний будет перемещаться по новому, который я пытался вставить. Есть ли способ отличить карусели, чтобы обе работали правильно?

извините за вводящее в заблуждение объяснение моей проблемы. для первых двух каруселей вы правы, у вас не должно быть sam eids. Третий, который я пытался добавить, я написал код html и js с разными элементами, а тот, который я добавил, не работает. Предоставляю код, указанный выше.

<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;"> 
         <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> 

Answer 1

Они нужны разные идентификаторы - идентификатор предназначен быть уникальным идентификатором, так что вы можете иметь только один на каждой странице.

Посмотрите внимательно на код на странице образца: http://sorgalla.com/projects/jcarousel/examples/static_multiple.html

Вы увидите, что каждый карусельного имеет уникальный идентификатор (первый-карусель, вторая-карусель, и т.д.).

Редактировать; Просто увидели, что ваше редактирование о карусели является обычным делом, поэтому, возможно, проект sorgalla не является непосредственно полезным. В любом случае идентификаторы должны быть уникальными.

Answer 2

Я реализовал несколько элементов карусели на одной странице, используя плагин jcarousel here. Первоначально у меня было 3 на одной странице без каких-либо проблем. Вы не можете иметь то же самое id для более чем одного элемента на странице

Answer 3

Большое спасибо за вашу помощь. Проблема заключалась в том, что в этой реализации карусели не только элементы должны иметь разные идентификаторы, но и переменные javascript и функции для каждой отдельной карусели. После этого он отлично работает.

Answer 4

Также кажется, что карусель не инициализируется, если она находится в скрытом блоке - display: none;.