javascript.html

                  </p>
                </dd>
              </dl>
            </div>
        </div>
      </div>
    </section>

     <!-- Carousel
    ================================================== -->

    <section id="carousel">
      <div class="page-header">
        <h1>Carousel <small>bootstrap-carousel.js</small></h1>
      </div>
      <div class="row">
        <div class="span3 columns">
          <p>A generic plugin for cycling through elements. A merry-go-round.</p>
          <a href="../js/bootstrap-carousel.js" target="_blank" class="btn primary">Download</a>
        </div>
        <div class="span9 columns">
          <h3>Using bootstrap-carousel.js</h3>
          <pre class="prettyprint linenums">$('.carousel').carousel()</pre>
            <h3>Markup</h3>
          <p>Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.</p>
<pre class="prettyprint linenums">
&lt;div class="thumbnail carousel"&gt;

  &lt;!-- items --&gt;
  &lt;div class="carousel-inner"&gt;
    &lt;div class="item active"&gt;
      &lt;img src="http://placehold.it/1100x350"&gt;
      &lt;div class="caption"&gt;
        &lt;h5&gt;Thumbnail label&lt;/h5&gt;
        &lt;p&gt;Cras justo odio, dapibus ac facilisis in, egestas eget quam. &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="item"&gt;
      &lt;img src="http://placehold.it/1100x350"&gt;
      &lt;div class="caption"&gt;
        &lt;h5&gt;Thumbnail label&lt;/h5&gt;
        &lt;p&gt;Donec id elit non mi porta gravida at eget metus.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;!-- navigation --&gt;
  &lt;a class="nav" href="#myCarousel" data-slide="next"&gt;&amp;lt;&lt;/a&gt;
  &lt;a class="nav" href="#myCarousel" data-slide="prev"&gt;&amp;gt;&lt;/a&gt;

&lt;/div&gt;
</pre>
          <h3>Demo</h3>

          <!-- carousel -->

          <div id="myCarousel" class="thumbnail carousel slide">

            <div class="carousel-inner">
              <div class="item active">
                <img src="http://placehold.it/1100x400" alt="">
                <div class="caption">
                  <h5>First Thumbnail label</h5>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
              </div>

              <div class="item">
                <img src="http://placehold.it/1100x400" alt="">
                <div class="caption">
                  <h5>Second Thumbnail label</h5>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
              </div>

              <div class="item">
                <img src="http://placehold.it/1100x400" alt="">
                <div class="caption">
                  <h5>Third Thumbnail label</h5>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
              </div>
            </div>

            <a class="left nav" href="#myCarousel" data-slide="prev">&laquo;</a>
            <a class="right nav" href="#myCarousel" data-slide="next">&raquo;</a>

          </div>

        </div>
      </div>
    </section>

      <!-- Footer
      ================================================== -->
      <footer class="footer">
        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
      </footer>
    </div><!-- /container -->


    <!-- Le javascript -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> -->
    <script src="../js/tests/vendor/jquery.js"></script>
    <script src="assets/js/google-code-prettify/prettify.js"></script>
    <script src="../js/bootstrap-transition.js"></script>
    <script src="../js/bootstrap-alert.js"></script>
    <script src="../js/bootstrap-modal.js"></script>
    <script src="../js/bootstrap-dropdown.js"></script>
    <script src="../js/bootstrap-scrollspy.js"></script>
    <script src="../js/bootstrap-tab.js"></script>
    <script src="../js/bootstrap-twipsy.js"></script>
    <script src="../js/bootstrap-popover.js"></script>
    <script src="../js/bootstrap-button.js"></script>
    <script src="../js/bootstrap-collapse.js"></script>
    <script src="../js/bootstrap-carousel.js"></script>
    <script src="assets/js/application.js"></script>
    <script>
      $(function () {
        // twipsy demo
        $('.twipsy-demo.well').twipsy({
          selector: "a[rel=twipsy]"
        })

        // popover demo
        $("a[rel=popover]")
          .popover()
          .click(function(e) {
            e.preventDefault()
          })

        // button state demo
        $('#fat-btn')
          .click(function () {
            var btn = $(this)
            btn.button('loading')
            setTimeout(function () {
              btn.button('reset')
            }, 3000)
          })
      })
    </script>
  </body>
</html>