8

我有一个我无法弄清楚的问题。我正在使用引导程序的轮播,除了转换之外一切正常:当滑动转换开始时,下一个项目出现在 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

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

谢谢!

4

6 回答 6

14
<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 中的溢出。

于 2012-11-15T10:01:43.203 回答
4

您可以将其添加到您的 css 中:

.carousel { overflow: hidden; }

.item { overflow: hidden: }
于 2012-11-15T10:02:32.293 回答
1

只需添加width:100%;到图像

img {
    width: 100%;
}
于 2013-06-11T08:02:18.853 回答
0

我尝试了 Kader 的解决方案来设置“溢出:隐藏”,但由于某种原因,它只适用于大屏幕。div 外的溢出仍然出现在较小的屏幕上。

最终,这是我添加到页面顶部以解决此问题的样式:

.carousel-inner > .next {
    display: none;
 }
 .carousel-inner > .prev {
    display: none;
 }

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

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

于 2017-06-09T19:16:42.280 回答
0

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

#carousel-item {
    height: 40rem;
} 

和,

img {
    width: 100%;
    height: 100%;
    display: block;
    background-size: cover;
  }
于 2020-02-14T13:42:59.323 回答
0

好的,所以这些解决方案都不适合我,但我终于发现在轮播上使用最大高度可以避免图像超出范围:

.carousel {
    max-height: whatever;
}
于 2021-04-03T23:19:30.793 回答