title: Bootstrap carousel is showing all slides at once
body: <p>It's my first time using Bootstrap Carousel, I did exactly what the documentation says, I have all four slides showing on top of each other. Any hints?</p>
  
  <pre><code>            &lt;div id="madinah-carousel" class="carousel slide" data-ride="carousel"&gt;
              &lt;!-- Indicators --&gt;
              &lt;ol class="carousel-indicators"&gt;
                  &lt;li data-target="#madinah-carousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
                  &lt;li data-target="#madinah-carousel" data-slide-to="1"&gt;&lt;/li&gt;
                  &lt;li data-target="#madinah-carousel" data-slide-to="2"&gt;&lt;/li&gt;
                  &lt;li data-target="#madinah-carousel" data-slide-to="3"&gt;&lt;/li&gt;
              &lt;/ol&gt;
              &lt;!-- Wrapper for slides --&gt;
              &lt;div class="carousel-inner" role="listbox"&gt;
                  &lt;div class="carousel-item active"&gt;
                      &lt;img src="img/mad/1.jpeg" alt="Madinah first screenshot"&gt;
                  &lt;/div&gt;
                  &lt;div class="carousel-item"&gt;
                      &lt;img src="img/mad/2.jpeg" alt="Madinah second screenshot"&gt;
                  &lt;/div&gt;
                  &lt;div class="carousel-item"&gt;
                      &lt;img src="img/mad/3.jpeg" alt="Madinah third screenshot"&gt;
                  &lt;/div&gt;
                  &lt;div class="carousel-item"&gt;
                      &lt;img src="img/mad/4.jpeg" alt="Madinah fourth screenshot"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- Controls --&gt;
              &lt;a class="left carousel-control" href="#madinah-carousel" role="button" data-slide="prev"&gt;
                  &lt;span class="icon-prev" 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="#madinah-carousel" role="button" data-slide="next"&gt;
                  &lt;span class="icon-next" aria-hidden="true"&gt;&lt;/span&gt;
                  &lt;span class="sr-only"&gt;Next&lt;/span&gt;
              &lt;/a&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>I also included this JS function:</p>
  
  <pre><code>$(function(){
  $('.carousel').carousel()
  });
  </code></pre>
  
  <p>This is the header:</p>
  
  <pre><code>&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;!--- Font Awsome --&gt;
  &lt;script src="https://use.fontawesome.com/4c7009c904.js"&gt;&lt;/script&gt;
  &lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  &lt;!-- my CSS --&gt;
  &lt;link rel="stylesheet" href="css/styles.css"&gt;
  </code></pre>
  
  <p></p>
  
  <p>At the bottom of the  I have the following:</p>
  
  <pre><code>        &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.1.1.slim.js" integrity="sha256-5i/mQ300M779N2OVDrl16lbohwXNUdzL/R2aVUXyXWA=" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- Latest compiled and minified JavaScript --&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;!-- Scrolling Nav JavaScript --&gt;
      &lt;script src="js/jquery.easing.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/scrolling-nav.js"&gt;&lt;/script&gt;
      &lt;script src="js/script.js"&gt;&lt;/script&gt;
  </code></pre>