ブートストラップイメージ・スライダコントロール適切

Question

機能しない...私のサイトhere

を参照してください。私は、ブートストラップでのプロジェクトに取り組んでいると私はコントロールで簡単な画像カルーセルを追加したが、問題はコントロールが動作しないということですあなたが見ることができるようにの次のとの前にのボタンを押すことはできません。

<div class="row"> 
    <div class="container"> 
     <div class="col-md-3"> 
     </div> 
     <div class="col-md-6"> 
      <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
       <!-- Indicators --> 
       <ol class="carousel-indicators"> 
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
        <li data-target="#myCarousel" data-slide-to="1"></li> 
        <li data-target="#myCarousel" data-slide-to="2"></li> 
       </ol> 

       <!-- Wrapper for slides --> 
       <div class="carousel-inner"> 
        <div class="item active"> 
         <img src="images/slideshow/1.jpg" alt="Los Angeles" style="width:100%;"> 
         <div class="carousel-caption"> 
          <h3>Los Angeles</h3> 
          <p>LA is always so much fun!</p> 
         </div> 
        </div> 

        <div class="item"> 
         <img src="images/slideshow/2.jpg" alt="Chicago" style="width:100%;"> 
         <div class="carousel-caption"> 
          <h3>Chicago</h3> 
          <p>Thank you, Chicago!</p> 
         </div> 
        </div> 

        <div class="item"> 
         <img src="images/slideshow/3.jpg" alt="New York" style="width:100%;"> 
         <div class="carousel-caption"> 
          <h3>New York</h3> 
          <p>We love the Big Apple!</p> 
         </div> 
        </div> 

       </div> 

       <!-- Left and right controls --> 
       <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
        <span class="glyphicon glyphicon-chevron-left"></span> 
        <span class="sr-only">Previous</span> 
       </a> 
       <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
        <span class="glyphicon glyphicon-chevron-right"></span> 
        <span class="sr-only">Next</span> 
       </a> 
      </div> 
     </div> 
     <div class="col-md-3"> 
     </div> 
    </div> 
</div> 

は基本的に私はこのコードで間違いのいずれかの種類を発見していないので、あなたが間違って何が起こっているか知っていれば、私は...感謝を教えてください：ここに私のコードです！

Answer 1

このページでは、id = "myCarousel"を複数回使用します。

1ページあたり1つのIDを持つことができます。他のid = "myCarousel"を削除すると、問題が修正されます。

IDのいくつかの追加情報：

IDはJavascriptが非常に簡単に要素をターゲットにするためにここにいます。しかし、彼らはJSで簡単にターゲット要素を作るが、そうでなければ一意である必要があり、スクリプトはどのIDをターゲットにするかを知ることができない。 JSを使って要素をターゲットにする方法は他にもたくさんありますが、これは最も簡単な方法の1つです。

小規模なアドバイス：可能な場合でも、CSS用のIDは作成されていないため、作成しないでください。 JSで使用するためにIDを残します。これは、コードの一貫性を維持するのに役立ちます。

Answer 2

コードに問題はありません。しかし、古いバージョンのjQueryを使用しています。新しいバージョンで更新してください。

http://take.ms/Rbwmf

あなたは、このバージョンを使用することができます。あなたのコードに完全に対応しています。

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 

おかげ