爲什麼我的靴子傳送帶導航無法正常工作？

Question

<div class="carousel slide "> 
    <div class="carousel-inner " data-ride="carousel" id="featured"> 
    <div class="item active"> 
     <img src="images/carousel-lifestyle.jpg" alt="Lifestyle Photo"> 
    </div> 
    <div class="item"> 
     <img src="images/carousel-mission.jpg" alt="Mission"> 
    </div> 
     <div class="item"> 
     <img src="images/carousel-vaccinations.jpg" alt="Vaccinations"> 
     </div> 
     <div class="item"> 
     <img src="images/carousel-fish.jpg" alt="Fish"> 
     </div> 
     <div class="item"> 
     <img src="images/carousel-exoticanimals.jpg" alt="Exotic Animals"> 
     </div> 



    <a href="#featured" class="left carousel-control" data-slide="prev" role="button"> 
     <span class="glyphicon glyphicon-chevron-left"></span> <!--Previous button--> 
    </a> 
    <a href="#featured" class="right carousel-control" data-slide="next" role="button"> 
     <span class="glyphicon glyphicon-chevron-right"></span> <!-- Next button--> 
    </a> 
    </div>  
</div> 

下一個和以前的導航按鈕不起作用，但他們是顯而易見的屏幕 我想不通爲什麼我的轉盤的導航是不工作的。

Answer 1

您的傳送帶缺少id。

<a href="#featured" class="left carousel-control" data-slide="prev" role="button"> 

您的導航鏈接引用到具有id="featured"的元素，但它不是在您的標記的任何地方。

添加featured爲ID，讓您的滑塊工作：

<div id="featured" class="carousel slide"> 
//-------^^^^^^^^ this missing id causing your slider to not work properly. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="featured" class="carousel slide"> 
 
    <div class="carousel-inner " data-ride="carousel" id="featured"> 
 
    <div class="item active"> 
 
     <img src="images/carousel-lifestyle.jpg" alt="Lifestyle Photo"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="images/carousel-mission.jpg" alt="Mission"> 
 
    </div> 
 
     <div class="item"> 
 
     <img src="images/carousel-vaccinations.jpg" alt="Vaccinations"> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="images/carousel-fish.jpg" alt="Fish"> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="images/carousel-exoticanimals.jpg" alt="Exotic Animals"> 
 
     </div> 
 

 

 

 
    <a href="#featured" class="left carousel-control" data-slide="prev" role="button"> 
 
     <span class="glyphicon glyphicon-chevron-left"></span> <!--Previous button--> 
 
    </a> 
 
    <a href="#featured" class="right carousel-control" data-slide="next" role="button"> 
 
     <span class="glyphicon glyphicon-chevron-right"></span> <!-- Next button--> 
 
    </a> 
 
    </div>  
 
</div>