Bootstrap旋轉木馬：滑動時圖像格外

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

我試圖卡德爾的解決方案設置「溢出的圖像：隱藏'，但由於某種原因，只能在大屏幕上工作。 div外的溢出仍然出現在較小的屏幕上。

最終，這裏是我添加到頁面的頂部，以解決此問題的造型：

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

傳入的圖像具有的.next或在過渡期間添加到它.prev類。通過隱藏這個元素來防止溢出問題。

可能有一個更優雅的解決方案，但這是快速，簡單且有效的。