twitter-bootstrap - Bootstrap 轮播 : images out of div when sliding

Question

我有一个我无法弄清楚的问题。我正在使用 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

任何人都可以看到什么问题？

谢谢!

Answer 1

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

嘿 friend 添加隐藏在 myCarousel id 中的溢出。