title: Carousel not sliding in Bootstrap
body: <p>I made a carousel using boot and it won't slide. When I tried the code on an online editor it ran and was able to slide. For some reason it will show the picture but I cannot goto the next pic. Plz help!!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.navbar-brands {
   float: left;
      height: 50px;
      padding: 0px;
      font-size: 18px;
      line-height: 20px;
  }
  
  .menu {
   font-size: 14px;
   font-family: 'Open Sans', sans-serif;
   color: #181717;
   letter-spacing: 1px;
  }
  
  a {
   color: #181717;
  }
  
  .carousel{
      background: #FFFFFF;
      margin-top: 50px;
  }
  .carousel .item img{
      margin: 0 auto; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;Guardians | Home&lt;/title&gt;
   &lt;link href='https://fonts.googleapis.com/css?family=Open+Sans:600' rel='stylesheet' type='text/css'&gt;
   &lt;!-- Mobile viewport optimized --&gt;
   &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
   &lt;!-- Latest compiled and minified CSS --&gt;
   &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  
   &lt;!-- Optional theme --&gt;
   &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"&gt;
  
   &lt;!-- Latest compiled and minified JavaScript --&gt;
   &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
   &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;div class="wrapper"&gt;
  
    &lt;div class="navbar navbar-fixed-top"&gt;
       &lt;div class="container"&gt;
        &lt;button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button"&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;div class="navbar-header"&gt;
            &lt;a class="navbar-brands" href="#"&gt;&lt;img src="jamallogo2.png"&gt;&lt;/a&gt;
         &lt;/div&gt;
         &lt;div class="collapse navbar-collapse navbar-responsive-collapse"&gt;
           &lt;ul class="nav navbar-nav pull-right"&gt;
              &lt;li id="active" class="menu"&gt;&lt;a href="index.html"&gt;HOME&lt;/a&gt;&lt;/li&gt;
              &lt;li class="menu"&gt;&lt;a href="#ABOUT"&gt;ABOUT US&lt;/a&gt;&lt;/li&gt;
              &lt;li class="menu"&gt;&lt;a href="#RESEARCH"&gt;RESEARCH&lt;/a&gt;&lt;/li&gt;
              &lt;li class="menu"&gt;&lt;a href="#DONATE"&gt;DONATE&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
         &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
          &lt;!-- Carousel indicators --&gt;
      &lt;ol class="carousel-indicators"&gt;
       &lt;li class="active" data-slide-to="0" data-target="#myCarousel"&gt;&lt;/li&gt;
       &lt;li data-slide-to="1" data-target="#myCarousel"&gt;&lt;/li&gt;
       &lt;li data-slide-to="2" data-target="#myCarousel"&gt;&lt;/li&gt;
      &lt;/ol&gt;
          &lt;!-- Wrapper for carousel items --&gt;
          &lt;div class="carousel-inner"&gt;
              &lt;div class="item active" alt="slide1"&gt;
                  &lt;img src="http://s7.postimg.org/c5f9quupn/leopard.jpg"&gt;
              &lt;/div&gt;
              &lt;div class="item" alt="slide2"&gt;
                  &lt;img src="http://s15.postimg.org/g1pqxnl47/gorilla.jpg?noCache=1440526418"&gt;
              &lt;/div&gt;
              &lt;div class="item" alt="slide3"&gt;
                  &lt;img src="http://s15.postimg.org/wgjoa833f/turtle.jpg"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- Carousel controls --&gt;
          &lt;a class="left carousel-control" data-slide="prev" href="#myCarousel"&gt;
              &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;a class="right carousel-control" data-slide="next" href="#myCarousel"&gt;
              &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>