0

我在我的 Rails 应用程序中实现了一个 Bootstrap Carousel。出于某种原因，如果我为轮播设置间隔，它会很好地滑动，但是当我单击下一个/上一个图标时，它会跳转到下一个或上一个图像而没有任何过渡。我怎样才能解决这个问题？

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

这是呈现的 html（用于其中一个轮播）：

<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">‹&lt;/a>
       <a class="carousel-control right" href="#523" data-slide="next" style="display:none">›&lt;/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>

我的页面包括 bootstrap-transition.js

4

1 回答 1

0

知道了; 事实证明，页面上有另一个元素与轮播元素具有相同的 id。通过重命名我的轮播 ID，我能够让它工作。

于 2013-07-03T21:56:40.063 回答