Question

我已经在我的页面中实现了一个twitter bootstrap轮播，但是遇到了一个问题。它将导航我添加到它的三个图像，但是在加载最后一个图像而不是循环回到第一个图像之后，它似乎在旋转木马中创建并清空项目，并在返回到第一个图像之前暂停几秒钟图片。使用“向左”箭头时它会正确滚动，但在使用“向右”箭头时会添加空图像。任何帮助，将不胜感激。我已经在我的.js文件中初始化了旋转木马。

<div id="myCarousel" class="carousel slide">        
  <div class="carousel-inner">            
  <!-- Carousel items -->            
  <div class="active item" style="background: none repeat scroll 0% 0% #000000">
    <img width="1700" height="500" alt="" src="/cmsimages/0/globe---Copy.png" style="margin: auto" />
  </div>

  <!--2nd carousel item-->            
  <div class="item" style="background: none repeat scroll 0% 0% #000000">
    <img width="1716" height="530" alt="" src="/cmsimages/0/devwordcloud.jpg" />
  </div>

  <div class="item" style="background: none repeat scroll 0% 0% #000000">
    <img width="1716" height="530" alt="" src="/cmsimages/0/Clouds.png" />   
  </div>            
  <!-- Carousel nav -->
  <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
  <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
  <!-- End Carousel --> 
  </div>
</div>

Answer 1

在编辑了你发布的代码并且看得更清楚之后，我能够看到你在旋转木马内部块中包含旋转木马导航，它应该在它之外...

<div id="myCarousel" class="carousel slide">        
  <div class="carousel-inner">            
    <!-- Carousel items -->            
    <div class="active item" style="background: none repeat scroll 0% 0% #000000">
      <img width="1700" height="500" alt="" src="/cmsimages/0/globe---Copy.png" style="margin: auto" />
   </div>

    <!--2nd carousel item-->            
    <div class="item" style="background: none repeat scroll 0% 0% #000000">
      <img width="1716" height="530" alt="" src="/cmsimages/0/devwordcloud.jpg" />
    </div>

    <div class="item" style="background: none repeat scroll 0% 0% #000000">
      <img width="1716" height="530" alt="" src="/cmsimages/0/Clouds.png" />   
    </div>
  </div> <!-- / carousel-inner -->

  <!-- Carousel nav -->
  <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
  <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
  <!-- End Carousel --> 
</div>

Twitter Bootstrap Carousel添加了一个空图像

1 个答案: