Twitter bootstrap 引导转盘在上一个/下一个图标单击时不滑动

我在Rails应用程序中实现了一个引导转盘。出于某种原因，如果我设置了旋转木马的间隔，它可以很好地滑动，但是当我单击下一个/上一个图标时，它会跳到下一个或上一个图像，而不进行任何转换。我怎样才能解决这个问题

     <div id="detailViewPhoto" class="slider-wrapper theme-default" >
          <div class="mainPhoto carousel slide <%=step.id%>" id="<%=step.id%>">
            <div class="carousel-inner <%=step.id%>">
            </div>
            <%# carousel controls %>
            <% if step.images.count >1 %>
            <a class="carousel-control left" href="#<%=step.id%>" data-slide="prev" style="display:none">&lsaquo;</a>
            <a class="carousel-control right" href="#<%=step.id%>" data-slide="next" style="display:none">&rsaquo;</a>
            <% end %>
         </div>

         <div class="thumbGallery <%=step.id%>">
         </div>

         <% step.images.order("position").each_with_index do |image, index| %>
         <script type="text/javascript">
            if(<%=index%>==0){
                $('.carousel-inner.<%=step.id%>').append('<div class="item active">       <a class="fancybox" href="<%=image.imagePath_url%>" rel="gallery <%=step.id%>"> <%=image_tag(image.imagePath_url(:preview), :width => "100%")%></a></div>'); 
             }
             else{
                 $('.carousel-inner.<%=step.id%>').append('<div class="item">       <a class="fancybox" href="<%=image.imagePath_url%>" rel="gallery <%=step.id%>"> <%=image_tag(image.imagePath_url(:preview), :width => "100%")%></a></div>'); 
                 }


             if("<%=step.images.count%>" >1){      
                  $('.thumbGallery.%=step.id%>').append('<%=image_tag(image.imagePath_url(:thumb), :data => {:parent => step.id, :position=> index})%>');
            }

            </script>

           <% end %>

<script>
(function($){
        // start carousel
        $('.carousel').carousel({
          interval: 1000
        });

    $('.mainPhoto').hover(function(){
      // reveal navigation
      $(this).children('a').fadeIn("fast");
    },
    function(){
      // hide navigation
      $(this).children('a').fadeOut("fast");
    });

}
</script>

1 %>
如果（=0）{
$（'.carousel-inner.'）。附加（''）；
}
否则{
$（'.carousel-inner.'）。附加（''）；
}
如果（“>1）{
$（'.thumbGallery.%=step.id%>'）。追加（'{:parent=>step.id，:position=>index}）%>'）；
}
（函数（$）{
//启动转盘
$（'.carousel'）。carousel({
间隔时间：1000
});
$（'.mainPhoto'）.hover（函数（）{
//显示导航
$（this.children（'a'）.fadeIn（“fast”）；
},
函数（）{
//隐藏导航
$（这个）。儿童（'a'）。淡出（“快速”）；
});
}

这是呈现的html（对于其中一个转盘）：

---

我的页面包含bootstrap transition.js

明白了；原来页面上还有另一个元素的id与carousel元素相同。通过重命名我的carousel id，我可以让它工作。

这个问题似乎脱离主题，因为它是由本地id冲突引起的。

<div id="detailViewPhoto" class="slider-wrapper theme-default">
      <div class="mainPhoto carousel slide 523" id="523">
           <div class="carousel-inner 523">
              <div class="item active">       
                 <a class="fancybox" aref="https://buildinprogress.s3.amazonaws.com/image/imagePath/897/2013-06-18_08.25.02.jpg" rel="gallery 523"> 
                    <img alt="Preview_2013-06-18_08.25.02" src="https://buildinprogress.s3.amazonaws.com/image/imagePath/897/preview_2013-06-18_08.25.02.jpg" width="100%">
          </a>
       </div>

      <div class="item">
           <a class="fancybox" href="https://buildinprogress.s3.amazonaws.com/image/imagePath/898/2013-06-18_08.24.07.jpg" rel="gallery 523"> 
           <img alt="Preview_2013-06-18_08.24.07" src="https://buildinprogress.s3.amazonaws.com/image/imagePath/898/preview_2013-06-18_08.24.07.jpg" width="100%">
           </a>
      </div>
      </div>
      <a class="carousel-control left" href="#523" data-slide="prev" style="display:none">‹</a>
       <a class="carousel-control right" href="#523" data-slide="next" style="display:none">›</a>
        </div>

                <div class="thumbGallery 523">
                <img alt="Thumb_2013-06-18_08.25.02" data-parent="523" data-position="0" src="https://buildinprogress.s3.amazonaws.com/image/imagePath/897/thumb_2013-06-18_08.25.02.jpg" style="padding: 4px; border: 1px solid rgb(204, 204, 204); max-width: 85%;"><img alt="Thumb_2013-06-18_08.24.07" data-parent="523" data-position="1" src="https://buildinprogress.s3.amazonaws.com/image/imagePath/898/thumb_2013-06-18_08.24.07.jpg" style="padding: 4px; border: 1px solid rgb(204, 204, 204); max-width: 85%;"></div>
                 </div>