ブートストラップカルーセルコントロール

Question

私はブートストラップ内でカルーセルと一緒に作業しています。私はこれをさまざまなバリエーションでテストしました。ブートストラップからサンプルコードをコピー＆ペーストしても、それはまだ動作しません。ファイルパスが正確であることを確認しました。コントロールはまだ表示されますが、何にもリンクされていないようです。私は「機能」について言及するいくつかの場所を見たことがありますが、これを何も変更することなく追加します。

<div class="container"> 
    <div id="myCarousel-example-generic" class="carousel slide"> 
     <!-- Indicators --> 
     <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> 

     <!-- Wrapper for slides --> 
     <div class="carousel-inner" role="listbox"> 
      <div class="item active"> 
       <img src="pics/01.jpg" style="max-width: 100%;" /> 
       <div class="carousel-caption"> 
        This should be first picture 
       </div> 
      </div> 

      <div class="item"> 
       <img src="pics/02.jpg" style="max-width: 100%;" /> 
       <div class="carousel-caption"> 
        This should be another picture 

       </div> 
      </div> 
      <div class="item"> 
       <img src="pics/03.jpg" style="max-width: 100%;" /> 
       <div class="carousel-caption"> 
        This is the last picture 
       </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> 

これは、カルーセルに関連する私のコードであると私は、これら2つのjsのスクリプトの下に持っているが

<script src="js/jquery-1.10.2.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 

が、私はそのシンプルなものが、私はこれで間違っているものを見つけることができないことを確信して呼び出します。

Answer 1

カルーセルのIDを変更しましたが、そのIDを参照するコントロールを更新しませんでした。 carousel-indicatorsとcarousel-controlは「carousel-example-generic」ではなく「myCarousel-example-generic」を参照する必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
<div class="container"> 
 
     <div id="myCarousel-example-generic" class="carousel slide"> 
 
      <!-- Indicators --> 
 
      <ol class="carousel-indicators"> 
 
       <li data-target="#myCarousel-example-generic" data-slide-to="0" class="active"></li> 
 
       <li data-target="#myCarousel-example-generic" data-slide-to="1"></li> 
 
       <li data-target="#myCarousel-example-generic" data-slide-to="2"></li> 
 
      </ol> 
 
    
 
      <!-- Wrapper for slides --> 
 
      <div class="carousel-inner" role="listbox"> 
 
       <div class="item active"> 
 
        <img src="http://placehold.it/750x150?text=1" style="max-width: 100%;" /> 
 
        <div class="carousel-caption"> 
 
         This should be first picture 
 
        </div> 
 
       </div> 
 
    
 
       <div class="item"> 
 
        <img src="http://placehold.it/750x150?text=2" style="max-width: 100%;" /> 
 
        <div class="carousel-caption"> 
 
         This should be another picture 
 
    
 
        </div> 
 
       </div> 
 
       <div class="item"> 
 
        <img src="http://placehold.it/750x150?text=3" style="max-width: 100%;" /> 
 
        <div class="carousel-caption"> 
 
         This is the last picture 
 
        </div> 
 
       </div> 
 
      </div> 
 
    
 
      <!-- Controls --> 
 
      <a class="left carousel-control" href="#myCarousel-example-generic" data-slide="prev"> 
 
       <span class="icon-prev"></span> 
 
      </a> 
 
      <a class="right carousel-control" href="#myCarousel-example-generic" data-slide="next"> 
 
       <span class="icon-next"></span> 
 
      </a> 
 
     </div> 
 
    
 
    
 
    
 
    </div>