ブートストラップカルーセル：摺動するときdivの画像

Question

私にはわからない問題があります。私はブートストラップのカルーセルを使用しています。トランジションを除いてすべて正常に動作します。次のアイテムは、スライド遷移が開始されるときに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

を私は「オーバーフローを設定するカデルのソリューションをしようとしただけで

img { 
    width: 100%; 
} 

Answer 4

画像にwidth:100%;を追加します。隠されました'しかし、何らかの理由で大画面でしか動かなかった。 divの外側のオーバーフローは、まだ小さな画面に表示されました。

最終的には、ここで私はこの問題を解決するには、ページの一番上に追加のスタイリングは、次のとおりです。

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

、着信画像は遷移中にそれに.nextや.prevクラスを追加しました。この要素を隠すことによって、オーバーフローの問題を防ぎます。

もっと洗練された解決策がありますが、これはすばやく簡単で効果的でした。