From 8b58a1c3d9fea740c89f48c1771a6c7dd44e1f41 Mon Sep 17 00:00:00 2001
From: Jacob Thornton <jacobthornton@gmail.com>
Date: Mon, 2 Jan 2012 19:13:02 -0800
Subject: placeholder design for carousel

---
 docs/javascript.html | 43 +++++++++++++++++++++++++++++++++++--------
 1 file changed, 35 insertions(+), 8 deletions(-)

(limited to 'docs/javascript.html')

diff --git a/docs/javascript.html b/docs/javascript.html
index 8e5e22adb..ae464e849 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -118,8 +118,8 @@
               <td>The collapse plugin offers simple, generic collapsible element support for making accordions and other collapsible ui components.</td>
             </tr>
             <tr>
-              <td><a href="./javascript.html#collapse">bootstrap-carousel.js</a></td>
-              <td>Carousel add</td>
+              <td><a href="./javascript.html#carousel">bootstrap-carousel.js</a></td>
+              <td>A plugin for rotating through elements. A merry-go-round.</td>
             </tr>
          </tbody>
        </table>
@@ -1015,7 +1015,7 @@ $('#myCollapsible').on('hidden', function () {
       </div>
       <div class="row">
         <div class="span3 columns">
-          <p>The carousel plugin creates a carousel douh..</p>
+          <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">
@@ -1023,11 +1023,40 @@ $('#myCollapsible').on('hidden', function () {
           <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"></pre>
+<pre class="prettyprint linenums">
+&lt;div class="thumbnail carousel"&gt;
+
+  &lt;!-- navigation --&gt;
+  &lt;a class="nav" href="#myCarousel" data-show="next"&gt;&amp;lt;&lt;/a&gt;
+  &lt;a class="nav" href="#myCarousel" data-show="previous"&gt;&amp;gt;&lt;/a&gt;
+
+  &lt;!-- items --&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;
+</pre>
           <h3>Demo</h3>
 
           <!-- carousel -->
-          <div class="thumbnail carousel">
+
+          <div id="myCarousel" class="thumbnail carousel">
+
+           <a class="left nav" href="#myCarousel" data-show="next">&laquo;</a>
+           <a class="right nav" href="#myCarousel" data-show="previous">&raquo;</a>
 
             <div class="item active">
               <img src="http://placehold.it/1100x350" alt="">
@@ -1037,7 +1066,7 @@ $('#myCollapsible').on('hidden', function () {
               </div>
             </div>
 
-            <div class="item active">
+            <div class="item">
               <img src="http://placehold.it/1100x350" alt="">
               <div class="caption">
                 <h5>Thumbnail label</h5>
@@ -1055,8 +1084,6 @@ $('#myCollapsible').on('hidden', function () {
 
           </div>
 
-
-
         </div>
       </div>
     </section>
-- 
cgit v1.2.3