title: Bootstrap Carousel-inner "autoplay"
body: <p>Can some one help me out? There are a few things wrong here I know. Why do i have to link bootstrap.min.js at the end of the header and at the bottom of the page. Ive tried using one at a time but it doesnt work. The next thing is that I want carousel to start when I load the page and when I click the controllers; not just when i click the controllers.
      
      </p>
  
  <pre><code>    &lt;head&gt;
          &lt;title&gt;The James Baldwin School&lt;/title&gt;
          &lt;link href="Framework/css/bootstrap.css" rel="stylesheet" type="text/css"&gt;
          &lt;link href="Main.css" rel="stylesheet" type="text/css"&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;header&gt;
          &lt;div class="navbar-wrapper"&gt;
    &lt;div class="container"&gt;
      &lt;div id="navtop" class="navbar navbar-inverse navbar-static-top"&gt;
  
          &lt;div class="navbar-header"&gt;
          &lt;a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&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;/a&gt;
          &lt;a class="navbar-brand" href="#"&gt;The James Baldwin School&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="navbar-collapse collapse"&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;li class="dropdown"&gt;
                &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Parents &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                &lt;ul class="dropdown-menu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="divider"&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
  
              &lt;li class="dropdown"&gt;
                &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Students &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                &lt;ul class="dropdown-menu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="divider"&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
  
              &lt;li class="dropdown"&gt;
                &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Teachers &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                &lt;ul class="dropdown-menu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="divider"&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
  
  
  
      &lt;/div&gt;
    &lt;/div&gt;&lt;!-- /container --&gt;
  &lt;/div&gt;&lt;!-- /navbar wrapper --&gt;
  
          &lt;!--- Javascript Bootstrap ---&gt;
          &lt;script src="Framework/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/header&gt;
  
  
  &lt;!-- Carousel
  ================================================== --&gt;
  &lt;div id="myCarousel" class="carousel slide"&gt;
    &lt;!-- Indicators --&gt;
    &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;/ol&gt;
    &lt;div class="carousel-inner"&gt;
    &lt;div class="item active"&gt;
        &lt;img src="http://1.bp.blogspot.com/-BUrT0CP-6nQ/U1prUuv6VjI/AAAAAAAAFbY/a6PUNgNhSWM/s1600/1500x500-New-York-Skyline-Twitter-Header0017.jpg" style="width:100%" class="img-responsive"&gt;
        &lt;div class="container"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h1&gt;Bootstrap 3 Carousel&lt;/h1&gt;
            &lt;p&gt;Pictures slide with overlapping words&lt;/p&gt;
            &lt;p&gt;&lt;a class="btn btn-lg btn-primary" href="http://getbootstrap.com"&gt;Learn More&lt;/a&gt;
          &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img src="http://1.bp.blogspot.com/-jBZKbiHI_2U/U1pszgzFAbI/AAAAAAAAFcI/8xrxWuBse9o/s1600/1500x500-New-York-Skyline-Twitter-Header0024.jpg" class="img-responsive"&gt;
        &lt;div class="container"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h1&gt;Each Slide can be different&lt;/h1&gt;
            &lt;p&gt;I just need some one to pick the pictures and words&lt;/p&gt;
            &lt;p&gt;&lt;a class="btn btn-large btn-primary" href="#"&gt;Learn more&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img src="http://mooxidesign.com/wp-content/uploads/2014/04/New-york-1500x500.jpg" class="img-responsive"&gt;
        &lt;div class="container"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h1&gt;Percentage-based sizing&lt;/h1&gt;
            &lt;p&gt;This Site is fully responsive and adjusts to the size of the browser your using. Meaning that it looks great on smart-phones&lt;/p&gt;
            &lt;p&gt;&lt;a class="btn btn-large btn-primary" href="#"&gt;Browse gallery&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- Controls --&gt;
    &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;
      &lt;span class="icon-prev"&gt;&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;
      &lt;span class="icon-next"&gt;&lt;/span&gt;
    &lt;/a&gt;  
  &lt;/div&gt;       
  &lt;!-- /.carousel --&gt;
  
  
  &lt;!-- Marketing messaging and featurettes
  ================================================== --&gt;
  &lt;!-- Wrap the rest of the page in another container to center all the content. --&gt;
  
  &lt;div class="container marketing"&gt;
  
    &lt;!-- Three columns of text below the carousel --&gt;
  &lt;div id="about"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-4 text-center"&gt;
        &lt;img class="img-circle" src="http://placehold.it/140x140"&gt;
        &lt;h2&gt;Brady Smith&lt;/h2&gt;
        &lt;p&gt;Principal Co-Director&lt;/p&gt;
        &lt;p&gt;&lt;a class="btn btn-default" href="#"&gt;View details »&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4 text-center"&gt;
        &lt;img class="img-circle" src="http://placehold.it/140x140"&gt;
        &lt;h2&gt;Josh Heisler&lt;/h2&gt;
        &lt;p&gt;Teacher Co-Director&lt;/p&gt;
        &lt;p&gt;&lt;a class="btn btn-default" href="#"&gt;View details »&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4 text-center"&gt;
        &lt;img class="img-circle" src="http://placehold.it/140x140"&gt;
        &lt;h2&gt;Christine Olsen&lt;/h2&gt;
        &lt;p&gt;Admissions&lt;/p&gt;
        &lt;p&gt;&lt;a class="btn btn-default" href="#"&gt;View details »&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;&lt;!-- /.row --&gt;
  &lt;/div&gt;
  
    &lt;!-- START THE FEATURETTES --&gt;
  
  
  
    &lt;!-- /END THE FEATURETTES --&gt;
  
  
    &lt;!-- FOOTER --&gt;
    &lt;footer&gt;
      &lt;p class="pull-right"&gt;&lt;a href="#"&gt;Back to top&lt;/a&gt;&lt;/p&gt;
      &lt;p&gt;This site was created by Isaac Perez. · &lt;a href="http://www.google.com"&gt;Check it out&lt;/a&gt;&lt;/p&gt;
    &lt;/footer&gt;
  
    &lt;/div&gt;&lt;!-- /.container --&gt;
  
  &lt;/body&gt;
          &lt;script src="Framework/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script src="Framework/js/jquery-2.1.3.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;// &lt;![CDATA[
          var $ = jQuery.noConflict(); $(document).ready(function()  { $('#myCarousel').carousel({ interval: 3000, cycle: true }); });
          // ]]&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>