私のスライドのカルーセルを移動することはできません

Question

私は自分のウェブサイトのカルーセルで作業しています。私はページを開くときにすべてが正しいように見える（画像が現れ、ドットが定位置にあり、次と前のボタンが現れる）。しかし、私が次か前をクリックしようとすると、何もしません。しばらくそれを修正しようとしていましたが、何が間違っているのか分かりません。どんな助けも素晴らしいだろう。

マイコード：

<div class="container"> 
    <div class = "row"> 
     <div class = "col-sm-12"> 

      <div id = "my-slider" class = "carousel slide" data-ride="carousel"> 

       <!--indicators dot nav --> 
       <ol class="carousel-indicators"> 
        <li data-target="#my-slider" data-slide-to="0" class = "active"></li> 
        <li data-target="#my-slider" data-slide-to="1"></li> 
        <li data-target="#my-slider" data-slide-to="2"></li> 
        <li data-target="#my-slider" data-slide-to="3"></li> 
        <li data-target="#my-slider" data-slide-to="4"></li> 
       </ol> 

       <!--Wrapper for slide --> 
       <div class = "carousel-inner" role = "listbox"> 

        <div class = "item active"> 
         <img src = "image/img1.jpg" alt = "stuff"/> 
         <div class="carousel-caption"> 
          <h1>header</h1> 
          <p>and paragraph</> 
         </div> 
        </div> 

        <div class = "item"> 
         <img src = "image/img2.jpg" alt = "stupid stuff"/> 
         <div class="carousel-caption"> 
          <h1>header</h1> 
          <p>and paragraph</> 
         </div> 
        </div> 

        <div class = "item"> 
         <img src = "image/img3.jpg" alt = "other stuff"/> 
         <div class="carousel-caption"> 
          <h1>header</h1> 
          <p>and paragraph</> 
         </div> 
        </div> 

        <div class = "item"> 
         <img src = "image/img4.jpg" alt = "more stuff"/> 
         <div class="carousel-caption"> 
          <h1>header</h1> 
          <p>and paragraph</> 
         </div> 
        </div> 

        <div class = "item"> 
         <img src = "image/img5.jpg" alt = "last stuff"/> 
         <div class="carousel-caption"> 
          <h1>header</h1> 
          <p>and paragraph</> 
         </div> 
        </div> 
       </div> 

       <!-- Controls --> 
       <a class="left carousel-control" href="#my-slider" 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="#my-slider" role = "button" data-slide="next"> 
        <span class="glyphicon glyphicon-chevron-right" aria-hidden = "true"></span> 
        <span class = "sr-only">Next</span> 
       </a> 

      </div>    
     </div> 
    </div> 
</div> 

Answer 1

は、なぜあなたは車輪の再発明しようとしています？これがフレームワークが存在する理由です。コンポーネントを適用しようとするときはいつでも、フレームワークを探してください。それはあなたのために多くの時間を節約します。 jQuery thumbnail scroller

Answer 2

これは、ブートストラップスライダのサンプルコードのようです。その場合は、スライダーを動作させるためにbootstrap.jsがリンクされていることと、jQueryが確実にリンクされていることを確認する必要があります。