title: Bootstrap 3 Carousel Not Working
body: <p>My carousel from Bootstrap won't display my images or react to the controls.</p>
  
  <p>This is my HTML:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Skates R Us&lt;/title&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" href="css/global.css"&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;a href="#" class="navbar-brand"&gt;
                          Skates R Us
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="collapse navbar-collapse"&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                          &lt;li class="active"&gt;
                              &lt;a href="index.html"&gt;Home&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="contact.html"&gt;Contact / About&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="shop.html"&gt;Shop&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="new.html"&gt;New Products&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="media.html"&gt;Media&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="carousel" class="carousel slide" data-ride="carousel"&gt;
              &lt;ol class="carousel-indicators"&gt;
                  &lt;li data-target="carousel" data-slide-to="0"&gt;&lt;/li&gt;
                  &lt;li data-target="carousel" data-slide-to="1"&gt;&lt;/li&gt;
                  &lt;li data-target="carousel" data-slide-to="2"&gt;&lt;/li&gt;
              &lt;/ol&gt;
              &lt;div class="carousel-inner"&gt;
                  &lt;div class="item"&gt;
                      &lt;img src="img/slide_1.png" alt="Slide 1"&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;img src="img/slide_2.png" alt="Slide 2"&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;img src="img/slide_3.png" alt="Slide 3"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;a href="#carousel" class="left carousel-control" data-slide="prev"&gt;
                  &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
              &lt;/a&gt;
              &lt;a href="#carousel" class="right carousel-control" data-slide="next"&gt;
                  &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
              &lt;/a&gt;
          &lt;/div&gt;
  
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              $("#carousel").carousel();
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>#carousel {
  
      margin-top: 50px;
  
  }
  
  .carousel {
      height: 500px;
      margin-bottom: 60px;
  }
  /* Since positioning the image, we need to help out the caption */
  .carousel-caption {
      z-index: 10;
  }
  
  /* Declare heights because of positioning of img element */
  .carousel .item {
      width: 100%;
      height: 500px;
      background-color: #777;
  }
  .carousel-inner &gt; .item &gt; img {
      position: absolute;
      top: 0;
      left: 0;
      min-width: 100%;
      height: 500px;
  }
  
  @media (min-width: 768px) {
      .carousel-caption p {
              margin-bottom: 20px;
              font-size: 21px;
              line-height: 1.4;
      }
  }
  
  img {
      background: red;
  }
  </code></pre>
  
  <p>There are no errors in the Chrome console and the code is pretty much the exact same as that from the Bootstrap examples.</p>
  
  <p>This is what the site looks like on my end:
  <img src="https://i.stack.imgur.com/SMfYg.png" alt="Site"></p>