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

次に、overflow:hiddenの高さを修正してみてくださいcarousel-item

#carousel-item {
    height: 40rem;
}

と、

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