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>

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

Answer 2

您可以在css中添加：

.carousel { overflow: hidden; }

和

.item { overflow: hidden: }

Answer 3

只需将width:100%;添加到图片

即可

img {
    width: 100%;
}

Answer 4

我尝试了Kader的解决方案来设置'overflow：hidden'，但出于某种原因只能在大屏幕上工作。 div外面的溢出仍然出现在较小的屏幕上。

最终，我在页面顶部添加了样式以解决此问题：

decimal

传入的图像在转换期间添加了.next或.prev类。通过隐藏此元素可以防止溢出问题。

可能有一个更优雅的解决方案，但这是快速，简单和有效的。

Answer 5

如果overflow:hidden，然后尝试固定carousel-item的高度

#carousel-item {
    height: 40rem;
}

和

img {
    width: 100%;
    height: 100%;
    display: block;
    background-size: cover;
  }

Answer 6

好的，所以这些解决方案都不适合我，但我终于发现在轮播上使用最大高度可以避免图像越界：

.carousel {
    max-height: whatever;
}

Bootstrap carousel：滑动时div的图像

6 个答案: