title: I cannot navigate between carousel my slides
body: <p>I have been working on a carousel for my website. everything looks correct when I open the page (picture shows up, dots are in place, and the next and prev buttons show up). but when I try to click on next or previous it doesn't do anything. been trying to fix it for awhile now but I just can't figure out what is wrong. Any help would be great. </p>
  
  <p>My Code: </p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class = "row"&gt;
          &lt;div class = "col-sm-12"&gt;
  
              &lt;div id = "my-slider" class = "carousel slide" data-ride="carousel"&gt;
  
                  &lt;!--indicators dot nav --&gt;
                  &lt;ol class="carousel-indicators"&gt;
                      &lt;li data-target="#my-slider" data-slide-to="0" class = "active"&gt;&lt;/li&gt;
                      &lt;li data-target="#my-slider" data-slide-to="1"&gt;&lt;/li&gt;
                      &lt;li data-target="#my-slider" data-slide-to="2"&gt;&lt;/li&gt;
                      &lt;li data-target="#my-slider" data-slide-to="3"&gt;&lt;/li&gt;
                      &lt;li data-target="#my-slider" data-slide-to="4"&gt;&lt;/li&gt;
                  &lt;/ol&gt;
  
                  &lt;!--Wrapper for slide --&gt;
                  &lt;div class = "carousel-inner" role = "listbox"&gt;
  
                      &lt;div class = "item active"&gt;
                          &lt;img src = "image/img1.jpg" alt = "stuff"/&gt;
                          &lt;div class="carousel-caption"&gt;
                              &lt;h1&gt;header&lt;/h1&gt;
                              &lt;p&gt;and paragraph&lt;/&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class = "item"&gt;
                          &lt;img src = "image/img2.jpg" alt = "stupid stuff"/&gt;
                          &lt;div class="carousel-caption"&gt;
                              &lt;h1&gt;header&lt;/h1&gt;
                              &lt;p&gt;and paragraph&lt;/&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class = "item"&gt;
                          &lt;img src = "image/img3.jpg" alt = "other stuff"/&gt;
                          &lt;div class="carousel-caption"&gt;
                              &lt;h1&gt;header&lt;/h1&gt;
                              &lt;p&gt;and paragraph&lt;/&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class = "item"&gt;
                          &lt;img src = "image/img4.jpg" alt = "more stuff"/&gt;
                          &lt;div class="carousel-caption"&gt;
                              &lt;h1&gt;header&lt;/h1&gt;
                              &lt;p&gt;and paragraph&lt;/&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class = "item"&gt;
                          &lt;img src = "image/img5.jpg" alt = "last stuff"/&gt;
                          &lt;div class="carousel-caption"&gt;
                              &lt;h1&gt;header&lt;/h1&gt;
                              &lt;p&gt;and paragraph&lt;/&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;!-- Controls --&gt;
                  &lt;a class="left carousel-control" href="#my-slider" role = "button" data-slide="prev"&gt;
                      &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden ="true"&gt;&lt;/span&gt;
                      &lt;span class = "sr-only"&gt;Previous&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;a class="right carousel-control" href="#my-slider" role = "button" data-slide="next"&gt;
                      &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden = "true"&gt;&lt;/span&gt;
                      &lt;span class = "sr-only"&gt;Next&lt;/span&gt;
                  &lt;/a&gt;
  
              &lt;/div&gt;              
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>