Я не могу перемещаться между карусели моими слайдами

Question

Я работаю над карусели для своего сайта. все выглядит правильно, когда я открываю страницу (изображение появляется, точки на месте, появляются кнопки next и prev). но когда я пытаюсь нажать на следующий или предыдущий, он ничего не делает. пытался исправить это на некоторое время, но я просто не могу понять, что не так. Любая помощь будет большой.

Мой код:

<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. Если это так, вам нужно убедиться, что bootstrap.js связан, а также jQuery для работы ползунка.