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>