Bootstrap carousel：滑动时图像从div传出 [英] Bootstrap carousel: images out of div when sliding

问题描述

我有一个我想不出来的问题。我正在使用Bootstrap的旋转木马，除了过渡之外，一切都运行得很好：当滑动过渡开始时，下一个项目出现在myCarousel div中，以前的活动项目滑出myCarousel div，因为它们将被我的下一个项目替换。

以下是我的html代码：

<div id="myCarousel" class="carousel slide span6">
     <div id="carousel-inner">
            <div class="active item">
                 <img src="img/abstract-landscape-paintings-bursting-sun.jpg" />
             </div>
             <div class="item">
                  <img src="img/charnwood_forest_landscape.jpg" />
             </div>
      </div>
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

我只使用旋转木马脚本：

    $(document).ready(function() {
    $(".carousel").carousel({
        interval: 5000,
        pause: "hover",
    });
});

这里有一个指向我的问题示例的链接，以便您可以检查我的整个代码：http://todoapp.nfshost.com/slide

有谁能看到有什么问题吗？

谢谢！

推荐答案

<div id="myCarousel" class="carousel slide span6" style="overflow:hidden">
 <div id="carousel-inner">
        <div class="active item">
             <img src="img/abstract-landscape-paintings-bursting-sun.jpg" />
         </div>
         <div class="item">
              <img src="img/charnwood_forest_landscape.jpg" />
         </div>
  </div>
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

嘿，朋友添加隐藏在myCarousel ID中的溢出。

这篇关于Bootstrap carousel：滑动时图像从div传出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！