爲什麼我的引導程序3.7傳送帶不起作用？

Question

我一直在關注如何實現bootstrap的這個功能，對於我的生活我不知道爲什麼它不工作。我將所有的CDN鏈接到我的頭文件和Js腳本中。所有這些都直接從bootstrap網站複製而來。

<div id="productCarousel" class="carousel slide" data-ride="carousel"> 
    <ol class="carousel-indicators"> 
     <li data-target="#productCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#productCarousel" data-slide-to="1"></li> 
     <li data-target="#productCarousel" data-slide-to="2"></li> 
     <li data-target="#productCarousel" data-slide-to="3"></li> 
    </ol> 

    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
      <img src="../../static/images/city.jpg"> 
     </div> 
     <div class="item"> 
      <img src="../../static/images/city.jpg"> 
     </div> 
     <div class="item"> 
      <img src="../../static/images/city.jpg"> 
     </div> 
     <div class="item"> 
      <img src="../../static/images/city.jpg"> 
     </div> 
    </div> 
    <a class="left carousel-control" href="#productCarousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#productCarousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
</div> 

Answer 1

我檢查了你的代碼，一切正常。

檢查如何嵌入庫。

1. 自舉CSS
2. jQuery的
3. 引導JS

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div id="productCarousel" class="carousel slide" data-ride="carousel"> 
 
        <ol class="carousel-indicators"> 
 
         <li data-target="#productCarousel" data-slide-to="0" class="active"></li> 
 
         <li data-target="#productCarousel" data-slide-to="1"></li> 
 
         <li data-target="#productCarousel" data-slide-to="2"></li> 
 
         <li data-target="#productCarousel" data-slide-to="3"></li> 
 
        </ol> 
 

 
        <div class="carousel-inner" role="listbox"> 
 
         <div class="item active"> 
 
          <img src="http://placehold.it/800x400"> 
 
         </div> 
 
         <div class="item"> 
 
          <img src="http://placehold.it/800x400"> 
 
         </div> 
 
         <div class="item"> 
 
          <img src="http://placehold.it/800x400"> 
 
         </div> 
 
         <div class="item"> 
 
          <img src="http://placehold.it/800x400"> 
 
         </div> 
 
        </div> 
 
        <a class="left carousel-control" href="#productCarousel" role="button" data-slide="prev"> 
 
         <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
         <span class="sr-only">Previous</span> 
 
        </a> 
 
        <a class="right carousel-control" href="#productCarousel" role="button" data-slide="next"> 
 
         <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
         <span class="sr-only">Next</span> 
 
        </a> 
 
       </div>