title: Bootstrap Carousel Not Working
body: <p>I'm struggling with Bootstrap carousel on my site. I've followed the instructions and looked for answers here and I'm still stuck, seems like everything I've done is ok..yet it clearly isn't! My carousel is not working. 
  Why isn't it working?</p>
  
  <p>I've been sitting on this so long and getting nowhere so I will really appreciate your help guys. </p>
  
  <p>Many thanks!</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
  
      &lt;title&gt;Hello World!&lt;/title&gt;
  
      &lt;!-- Bootstrap core CSS --&gt;
      &lt;link href="css/bootstrap.css" rel="stylesheet"&gt;
      &lt;link href="css/style.css" rel="stylesheet"&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Catamaran:300,400,100' rel='stylesheet' type='text/css'&gt;
  
  &lt;script src="js/bootstrap-carousel.js"&gt;&lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function() {
      $('#myCarousel').carousel({
      //options here
      });
  });
  
  &lt;/script&gt; 
      &lt;!-- Custom styles for this template go here --&gt;
  
      &lt;!-- Just for debugging purposes. Don't actually copy this line! --&gt;
      &lt;!--[if lt IE 9]&gt;&lt;script src="../../docs-assets/js/ie8-responsive-file-warning.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
  
      &lt;!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
      &lt;!--[if lt IE 9]&gt;
        &lt;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&gt;&lt;/script&gt;
        &lt;script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
  
          &lt;div class="nav"&gt;
  
              &lt;div class="logoimg"&gt;
  
                  &lt;img src="img/logo3.png"&gt;
  
  
              &lt;/div&gt;
  
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="faq.html"&gt;FAQ&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
  
          &lt;!-- Carousel --&gt;
  
          &lt;div id="carousel" class="carousel slide" data-ride="carousel"&gt;
              &lt;!-- Indicators --&gt;
              &lt;ol class="carousel-indicators"&gt;
                  &lt;li data-target="#carousel" data-slide-to="0" class="active"&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;!-- Wrapper for slides --&gt;
              &lt;div class="carousel-inner" role="listbox"&gt;
                  &lt;div class="item active"&gt;
                      &lt;img src="img/slide1.jpg" alt="Slide 1"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="item"&gt;
                      &lt;img src="img/slide2.jpg" alt="Slide 2"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="item"&gt;
                      &lt;img src="img/slide3.jpg" alt="Slide 3"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
  
              &lt;!-- Controls --&gt;
              &lt;a class="left carousel-control" href="#carousel" 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="#carousel" 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;a class="right carousel-control" href="#carousel" 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;!-- Carousel End--&gt;
  
  
      &lt;/body&gt;
  
      &lt;/html&gt;
  </code></pre>