Bootstrap旋轉木馬控件

Question

我正在使用Bootstrap內的旋轉木馬。我用很多不同的變化測試了這個。即使我從引導中複製並粘貼示例代碼，它仍然不起作用。我已驗證文件路徑是準確的。控制仍然出現，但他們似乎沒有任何關聯。我見過一些提到「功能」的地方，但是當我在沒有任何改變的情況下添加這個功能時。

<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> 

這是相關的轉盤我的代碼，我有下面這兩個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需要引用「myCarousel-example-generic」而不是「carousel-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>