私のブートストラップ3.7カルーセルはなぜ機能しませんか？

Question

私はブートストラップのこの機能を実装する方法についてのガイドを守ってきましたが、私の人生の間、それが動作しない理由を理解できません。私はすべてのCDNが私のヘッダーにリンクされており、Js 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="../../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>

どういうわけか