1

ナビゲーション バーが正しく動作しません。3 つのスライダー イメージをすべて同時に縦一列に表示し、写真をスライドしません。使用する CSS は twitter ブートストラップの CSS です。そこには独自のCSSがありますが、カルーセルに影響を与えるものはなく、JavaScriptも追加されておらず、Jqueryとbootstrap.jsだけです。これがブートストラップ V3 です。何か案が？

<div class="container">
   <div id="carousel-example-generic" class="carousel slide">
      <ol class="carousel-indicators">
         <li data-target="#carousel-example-generic" data-   
            slide-to="0" class="active"></li>
         <li data-target="#carousel-example-generic" data-
            slide-to="1"></li>
         <li data-target="#carousel-example-generic" data-
            slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
         <div class="item active">
            <img src="img/timthumb.jpg" alt="...">
            <div class="carousel-caption">
               <p>Eyes of the owl</p>
            </div>
         </div>
         <div class="item active">
            <img src="img/timthumb.jpg" alt="...">
            <div class="carousel-caption">
               <p>Eyes of the owl</p>
            </div>
         </div>
         <div class="item active">
            <img src="img/timthumb.jpg" alt="...">
            <div class="carousel-caption">
               <p>Eyes of the owl</p>
            </div>
         </div>
      </div>
      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-
         example-generic" data-slide="prev">
      <span class="icon-prev"></span>
      </a>
      <a class="right carousel-control" href="#carousel-
         example-generic" data-slide="next">
      <span class="icon-next"></span>
      </a>
   </div>
</div>
4

1 に答える 1

2

あなたの問題はactive、すべてのスライドにクラスを指定したことのようです。開始する最初のものだけに指定します。それらのすべてを指定activeすると、それらすべてが表示され、スライドを切り替えるセレクター（ボタンのクリックで前または次のアクティブでないアイテムは他のものを選択できません）は、非アクティブなものがないため、選択に失敗しますもう。

            <div class="item active">
                <img src="http:\\placehold.it\32x100" alt="..." />
                <div class="carousel-caption">
                    <p>Eyes of the owl</p>
                </div>
            </div>
            <div class="item"> <!-- removed active class from here -->
                <img src="http:\\placehold.it\42x100" alt="..." />
                <div class="carousel-caption">
                    <p>Eyes of the owl</p>
                </div>
            </div>
            <div class="item"><!-- removed active class from here -->
                <img src="http:\\placehold.it\52x100" alt="..." />
                <div class="carousel-caption">
                    <p>Eyes of the owl</p>
                </div>
            </div>

フィドル

于 2013-09-20T02:27:25.243 に答える