From c8981da80ee88ae5e42ad91c70a0247cd50916c7 Mon Sep 17 00:00:00 2001
From: John Boxall <john@mobify.me>
Date: Wed, 1 Aug 2012 09:55:27 -0700
Subject: [PATCH 1/3] Update Carousel documentation.

---
 www/_includes/nav-modules.html     |   1 -
 www/_layouts/module-index.html     |  10 +-
 www/modules/carousel-examples.html | 466 +++++++++++++----------------
 www/modules/carousel.md            | 100 +++++--
 www/modules/index.md               |  15 +-
 5 files changed, 295 insertions(+), 297 deletions(-)

diff --git a/www/_includes/nav-modules.html b/www/_includes/nav-modules.html
index fe445429..daede17a 100644
--- a/www/_includes/nav-modules.html
+++ b/www/_includes/nav-modules.html
@@ -7,7 +7,6 @@
 	                        	<a href="{{ site.baseurl }}/modules/carousel">Carousel</a>
 		                        <ul class="hide-inactive">
 			                        <li><a href="{{ site.baseurl }}/modules/carousel/#usage">Usage</a></li>
-			                        <li><a href="{{ site.baseurl }}/modules/carousel/#markup">Markup</a></li>
 			                        <li><a href="{{ site.baseurl }}/modules/carousel/#classes">Classes</a></li>
 			                        <li><a href="{{ site.baseurl }}/modules/carousel/#methods">Methods</a></li>
 			                        <li><a href="{{ site.baseurl }}/modules/carousel/#events">Events</a></li>
diff --git a/www/_layouts/module-index.html b/www/_layouts/module-index.html
index 18d4f28b..feccb736 100644
--- a/www/_layouts/module-index.html
+++ b/www/_layouts/module-index.html
@@ -12,7 +12,7 @@
 		<li class="carousel">
 			<a href="{{ site.baseurl }}/modules/carousel">
 				<h3>Carousel</h3>
-				<p>A configurable rotating content carousel module.</p>
+				<p>A configurable rotating content carousel.</p>
 			</a>
 		</li>
 		<li class="accordion">
@@ -27,6 +27,8 @@ <h3>Zoomable</h3>
 				<p>{description needed}</p>
 			</a>
 		</li>
+        <!-- 
+
 		<li class="coming-soon">
 			<a href="{{ site.baseurl }}/modules/">
 				<h3>Coming Soon</h3>
@@ -45,7 +47,7 @@ <h3>Coming Soon</h3>
 				<p>We&#8217;re hard at work on more modules. Watch this space.</p>
 			</a>
 		</li>
-	</ul>
-
-</div>
 
+        -->
+	</ul>
+</div>
\ No newline at end of file
diff --git a/www/modules/carousel-examples.html b/www/modules/carousel-examples.html
index 2b9d90dc..fa98a23a 100644
--- a/www/modules/carousel-examples.html
+++ b/www/modules/carousel-examples.html
@@ -6,11 +6,13 @@
 <link rel="stylesheet" href="{{ site.baseurl }}/static/examples/css/carousel.css">
 <link rel="stylesheet" href="{{ site.baseurl }}/static/examples/css/carousel-controls.css">
 <style>
+
 /* have drop shadow extend outside of parent for some examples */
 .m-carousel {
   padding: 10px;
   margin: -10px;
 }
+
   /* but not this one, because we're doing something else instead */
   .m-carousel-example-2, .m-carousel-example-2a {
     padding: 0;
@@ -86,11 +88,10 @@ <h1>Carousel Examples</h1>
 
 <p>Examples of the rotating image carousel module in action. Sample code provided.</p>
 
-
 <h2>Previous/Next controls</h2>
-<p>Image carousel with simple Previous / Next controls to advance between items.</p>
-<div class="m-carousel m-carousel-example-1 m-center m-fluid">
-  <!-- Carousel items -->
+<p>Carousel with Previous / Next controls to advance between items.</p>
+
+<div class="m-carousel m-center m-fluid m-carousel-example-1">
   <div class="m-carousel-inner">
     <div class="m-item">
         <img src="{{ site.baseurl }}/static/examples/img/blossoms.jpg">
@@ -108,16 +109,14 @@ <h2>Previous/Next controls</h2>
         <img src="{{ site.baseurl }}/static/examples/img/pods.jpg">
     </div>
   </div>
-  <!-- Carousel controls -->
   <div class="m-carousel-controls">
-    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo; Previous</a>
-    <a class="carousel-control right" href="#myCarousel" data-slide="next">Next &rsaquo;</a>  
+    <a class="carousel-control left" href="#" data-slide="prev">&lsaquo; Previous</a>
+    <a class="carousel-control right" href="#" data-slide="next">Next &rsaquo;</a>  
   </div>
 </div>
 
 <h3>Code for this example:</h3>
 <pre><code>&lt;div class="m-carousel m-center m-fluid"&gt;
-  &lt;!-- Carousel items --&gt;
   &lt;div class=&quot;m-carousel-inner&quot;&gt;
     &lt;div class=&quot;m-item&quot;&gt;
         &lt;img src=&quot;image1.jpg&quot;&gt;
@@ -129,166 +128,154 @@ <h3>Code for this example:</h3>
         &lt;img src=&quot;image3.jpg&quot;&gt;
     &lt;/div&gt;
   &lt;/div&gt;
-  &lt;!-- Carousel controls --&gt;
+  &lt;!-- use the `data-slide` attribute to create controls --&gt;
   &lt;div class=&quot;m-carousel-controls&quot;&gt;
-    &lt;a class=&quot;carousel-control left&quot; href=&quot;#myCarousel&quot; data-slide=&quot;prev&quot;&gt;&amp;lsaquo; Previous&lt;/a&gt;
-    &lt;a class=&quot;carousel-control right&quot; href=&quot;#myCarousel&quot; data-slide=&quot;next&quot;&gt;Next &amp;rsaquo;&lt;/a&gt;  
+    &lt;a class=&quot;carousel-control left&quot; href=&quot;#&quot; data-slide=&quot;prev&quot;&gt;&amp;lsaquo; Previous&lt;/a&gt;
+    &lt;a class=&quot;carousel-control right&quot; href=&quot;#&quot; data-slide=&quot;next&quot;&gt;Next &amp;rsaquo;&lt;/a&gt;  
   &lt;/div&gt;
 &lt;/div&gt;</code></pre>
 
 
 
 <h2>Fixed Width Items</h2>
-<p>The items can be stretched to fit the viewport, or they can be sized individually like in this example.</p>
-<div class="m-carousel m-carousel-example-2 m-center">
-  <!-- Carousel items -->
-  <div class="m-carousel-inner">
-    <div class="m-item">
-        <div class="slide narrow">
-            <img src="{{ site.baseurl }}/static/examples/img/blossoms.jpg">
-            <p>Blossoms</p>
+<p>Items can be stretched to fit the viewport, or they can be sized individually like in this example.</p>
+
+<div class="m-carousel m-center m-carousel-example-2">
+    <div class="m-carousel-inner">
+        <div class="m-item">
+            <div class="slide narrow">
+                <img src="{{ site.baseurl }}/static/examples/img/blossoms.jpg">
+                <p>Blossoms</p>
+            </div>
         </div>
-    </div>
-    <div class="m-item">
-        <div class="slide wide">
-            <img src="{{ site.baseurl }}/static/examples/img/glacier.jpg">
-            <p>Glacier</p>
+        <div class="m-item">
+            <div class="slide wide">
+                <img src="{{ site.baseurl }}/static/examples/img/glacier.jpg">
+                <p>Glacier</p>
+            </div>
         </div>
-    </div>
-    <div class="m-item">
-        <div class="slide narrow">
-            <img src="{{ site.baseurl }}/static/examples/img/helmets.jpg">
-            <p>Helmets</p>
+        <div class="m-item">
+            <div class="slide narrow">
+                <img src="{{ site.baseurl }}/static/examples/img/helmets.jpg">
+                <p>Helmets</p>
+            </div>
         </div>
-    </div>
-    <div class="m-item">
-        <div class="slide wide">
-            <img src="{{ site.baseurl }}/static/examples/img/parliament.jpg">
-            <p>Parliament</p>
+        <div class="m-item">
+            <div class="slide wide">
+                <img src="{{ site.baseurl }}/static/examples/img/parliament.jpg">
+                <p>Parliament</p>
+            </div>
         </div>
-    </div>
-    <div class="m-item">
-        <div class="slide narrow">
-            <img src="{{ site.baseurl }}/static/examples/img/pods.jpg">
-            <p>Pods</p>
+        <div class="m-item">
+            <div class="slide narrow">
+                <img src="{{ site.baseurl }}/static/examples/img/pods.jpg">
+                <p>Pods</p>
+            </div>
         </div>
     </div>
-  </div>
-  <!-- Carousel controls -->
-  <div class="m-carousel-controls">
-    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo; Previous</a>
-    <a class="carousel-control right" href="#myCarousel" data-slide="next">Next &rsaquo;</a>  
-  </div>
+    <div class="m-carousel-controls">
+        <a class="carousel-control left" href="#" data-slide="prev">&lsaquo; Previous</a>
+        <a class="carousel-control right" href="#" data-slide="next">Next &rsaquo;</a>  
+    </div>
 </div>
 
 <h3>Code for this example:</h3>
 <pre><code>&lt;div class=&quot;m-carousel m-center&quot;&gt;
-  &lt;!-- Carousel items --&gt;
   &lt;div class=&quot;m-carousel-inner&quot;&gt;
     &lt;div class=&quot;m-item&quot;&gt;
-        &lt;div class=&quot;card narrow&quot;&gt;
-            &lt;img src=&quot;image1.jpg&quot;&gt;
-            &lt;p&gt;Caption #1&lt;/p&gt;
-        &lt;/div&gt;
+      &lt;div class=&quot;card narrow&quot;&gt;
+        &lt;img src=&quot;image1.jpg&quot;&gt;
+        &lt;p&gt;Caption #1&lt;/p&gt;
+      &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class=&quot;m-item&quot;&gt;
-        &lt;div class=&quot;card wide&quot;&gt;
-            &lt;img src=&quot;image2.jpg&quot;&gt;
-            &lt;p&gt;Caption #2&lt;/p&gt;
-        &lt;/div&gt;
+      &lt;div class=&quot;card wide&quot;&gt;
+        &lt;img src=&quot;image2.jpg&quot;&gt;
+        &lt;p&gt;Caption #2&lt;/p&gt;
+      &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class=&quot;m-item&quot;&gt;
-        &lt;div class=&quot;card narrow&quot;&gt;
-            &lt;img src=&quot;image3.jpg&quot;&gt;
-            &lt;p&gt;Caption #3&lt;/p&gt;
-        &lt;/div&gt;
+      &lt;div class=&quot;card narrow&quot;&gt;
+        &lt;img src=&quot;image3.jpg&quot;&gt;
+        &lt;p&gt;Caption #3&lt;/p&gt;
+      &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
-  &lt;!-- Carousel controls --&gt;
   &lt;div class=&quot;m-carousel-controls&quot;&gt;
-    &lt;a class=&quot;carousel-control left&quot; href=&quot;#myCarousel&quot; data-slide=&quot;prev&quot;&gt;&amp;lsaquo; Previous&lt;/a&gt;
-    &lt;a class=&quot;carousel-control right&quot; href=&quot;#myCarousel&quot; data-slide=&quot;next&quot;&gt;Next &amp;rsaquo;&lt;/a&gt;  
+    &lt;a class=&quot;carousel-control left&quot; href=&quot;#&quot; data-slide=&quot;prev&quot;&gt;&amp;lsaquo; Previous&lt;/a&gt;
+    &lt;a class=&quot;carousel-control right&quot; href=&quot;#&quot; data-slide=&quot;next&quot;&gt;Next &amp;rsaquo;&lt;/a&gt;  
   &lt;/div&gt;
-&lt;/div&gt;
-</code></pre>
-
-
-
+&lt;/div&gt;</code></pre>
 
 <h2>Scaled Transitions</h2>
 <p>Display the current item larger than the rest, and animate the transition between each with the <code>m-scaled</code> class.</p>
-<div class="m-carousel m-carousel-example-2a m-scaled m-center">
-  <!-- Carousel items -->
-  <div class="m-carousel-inner">
-    <div class="m-item">
-        <div class="slide narrow">
-            <img src="{{ site.baseurl }}/static/examples/img/blossoms.jpg">
-            <p>Blossoms</p>
+
+<div class="m-carousel m-center m-scaled m-carousel-example-2a">
+    <div class="m-carousel-inner">
+        <div class="m-item">
+            <div class="slide narrow">
+                <img src="{{ site.baseurl }}/static/examples/img/blossoms.jpg">
+                <p>Blossoms</p>
+            </div>
         </div>
-    </div>
-    <div class="m-item">
-        <div class="slide narrow">
-            <img src="{{ site.baseurl }}/static/examples/img/glacier.jpg">
-            <p>Glacier</p>
+        <div class="m-item">
+            <div class="slide narrow">
+                <img src="{{ site.baseurl }}/static/examples/img/glacier.jpg">
+                <p>Glacier</p>
+            </div>
         </div>
-    </div>
-    <div class="m-item">
-        <div class="slide narrow">
-            <img src="{{ site.baseurl }}/static/examples/img/helmets.jpg">
-            <p>Helmets</p>
+        <div class="m-item">
+            <div class="slide narrow">
+                <img src="{{ site.baseurl }}/static/examples/img/helmets.jpg">
+                <p>Helmets</p>
+            </div>
         </div>
-    </div>
-    <div class="m-item">
-        <div class="slide narrow">
-            <img src="{{ site.baseurl }}/static/examples/img/parliament.jpg">
-            <p>Parliament</p>
+        <div class="m-item">
+            <div class="slide narrow">
+                <img src="{{ site.baseurl }}/static/examples/img/parliament.jpg">
+                <p>Parliament</p>
+            </div>
         </div>
-    </div>
-    <div class="m-item">
-        <div class="slide narrow">
-            <img src="{{ site.baseurl }}/static/examples/img/pods.jpg">
-            <p>Pods</p>
+        <div class="m-item">
+            <div class="slide narrow">
+                <img src="{{ site.baseurl }}/static/examples/img/pods.jpg">
+                <p>Pods</p>
+            </div>
         </div>
     </div>
-  </div>
-  <!-- Carousel controls -->
-  <div class="m-carousel-controls">
-    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo; Previous</a>
-    <a class="carousel-control right" href="#myCarousel" data-slide="next">Next &rsaquo;</a>  
-  </div>
+    <div class="m-carousel-controls">
+        <a class="carousel-control left" href="#" data-slide="prev">&lsaquo; Previous</a>
+        <a class="carousel-control right" href="#" data-slide="next">Next &rsaquo;</a>  
+    </div>
 </div>
 
 <h3>Code for this example:</h3>
-<pre><code>&lt;div class=&quot;m-carousel m-scaled m-center&quot;&gt;
-  &lt;!-- Carousel items --&gt;
+<pre><code>&lt;div class=&quot;m-carousel m-center m-scaled&quot;&gt;
   &lt;div class=&quot;m-carousel-inner&quot;&gt;
     &lt;div class=&quot;m-item&quot;&gt;
-        &lt;div class=&quot;card narrow&quot;&gt;
-            &lt;img src=&quot;image1.jpg&quot;&gt;
-            &lt;p&gt;Caption #1&lt;/p&gt;
-        &lt;/div&gt;
+      &lt;div class=&quot;card narrow&quot;&gt;
+        &lt;img src=&quot;image1.jpg&quot;&gt;
+        &lt;p&gt;Caption #1&lt;/p&gt;
+      &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class=&quot;m-item&quot;&gt;
-        &lt;div class=&quot;card narrow&quot;&gt;
-            &lt;img src=&quot;image2.jpg&quot;&gt;
-            &lt;p&gt;Caption #2&lt;/p&gt;
-        &lt;/div&gt;
+      &lt;div class=&quot;card narrow&quot;&gt;
+        &lt;img src=&quot;image2.jpg&quot;&gt;
+        &lt;p&gt;Caption #2&lt;/p&gt;
+      &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class=&quot;m-item&quot;&gt;
-        &lt;div class=&quot;card narrow&quot;&gt;
-            &lt;img src=&quot;image3.jpg&quot;&gt;
-            &lt;p&gt;Caption #3&lt;/p&gt;
-        &lt;/div&gt;
+      &lt;div class=&quot;card narrow&quot;&gt;
+        &lt;img src=&quot;image3.jpg&quot;&gt;
+        &lt;p&gt;Caption #3&lt;/p&gt;
+      &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
-  &lt;!-- Carousel controls --&gt;
   &lt;div class=&quot;m-carousel-controls&quot;&gt;
-    &lt;a class=&quot;carousel-control left&quot; href=&quot;#myCarousel&quot; data-slide=&quot;prev&quot;&gt;&amp;lsaquo; Previous&lt;/a&gt;
-    &lt;a class=&quot;carousel-control right&quot; href=&quot;#myCarousel&quot; data-slide=&quot;next&quot;&gt;Next &amp;rsaquo;&lt;/a&gt;  
+    &lt;a class=&quot;carousel-control left&quot; href=&quot;#&quot; data-slide=&quot;prev&quot;&gt;&amp;lsaquo; Previous&lt;/a&gt;
+    &lt;a class=&quot;carousel-control right&quot; href=&quot;#&quot; data-slide=&quot;next&quot;&gt;Next &amp;rsaquo;&lt;/a&gt;  
   &lt;/div&gt;
-&lt;/div&gt;
-</code></pre>
-
+&lt;/div&gt;</code></pre>
 
 
 <h2>Image + Caption</h2>
@@ -329,38 +316,30 @@ <h2>Image + Caption</h2>
   </div>
   <!-- Carousel controls -->
   <div class="m-carousel-controls">
-    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo; Previous</a>
-    <a class="carousel-control right" href="#myCarousel" data-slide="next">Next &rsaquo;</a>  
+    <a class="carousel-control left" href="#" data-slide="prev">&lsaquo; Previous</a>
+    <a class="carousel-control right" href="#" data-slide="next">Next &rsaquo;</a>  
   </div>
 </div>
 
 <h3>Code for this example:</h3>
 <pre><code>&lt;div class=&quot;m-carousel m-center m-fluid&quot;&gt;
-  &lt;!-- Carousel items --&gt;
   &lt;div class=&quot;m-carousel-inner&quot;&gt;
     &lt;div class=&quot;m-item&quot;&gt;
-      &lt;p class=&quot;caption&quot;&gt;
-        Caption #1
-      &lt;/p&gt;
+      &lt;p class=&quot;caption&quot;&gt;Caption #1&lt;/p&gt;
       &lt;img src=&quot;image1.jpg&quot;&gt;
     &lt;/div&gt;
     &lt;div class=&quot;m-item&quot;&gt;
-      &lt;p class=&quot;caption&quot;&gt;
-        Caption #2
-      &lt;/p&gt;
+      &lt;p class=&quot;caption&quot;&gt;Caption #2&lt;/p&gt;
       &lt;img src=&quot;image2.jpg&quot;&gt;
     &lt;/div&gt;
     &lt;div class=&quot;m-item&quot;&gt;
-      &lt;p class=&quot;caption&quot;&gt;
-        Caption #3
-      &lt;/p&gt;
+      &lt;p class=&quot;caption&quot;&gt;Caption #3&lt;/p&gt;
       &lt;img src=&quot;image3.jpg&quot;&gt;
     &lt;/div&gt;
   &lt;/div&gt;
-  &lt;!-- Carousel controls --&gt;
   &lt;div class=&quot;m-carousel-controls&quot;&gt;
-    &lt;a class=&quot;carousel-control left&quot; href=&quot;#myCarousel&quot; data-slide=&quot;prev&quot;&gt;&amp;lsaquo; Previous&lt;/a&gt;
-    &lt;a class=&quot;carousel-control right&quot; href=&quot;#myCarousel&quot; data-slide=&quot;next&quot;&gt;Next &amp;rsaquo;&lt;/a&gt;  
+    &lt;a class=&quot;carousel-control left&quot; href=&quot;#&quot; data-slide=&quot;prev&quot;&gt;&amp;lsaquo; Previous&lt;/a&gt;
+    &lt;a class=&quot;carousel-control right&quot; href=&quot;#&quot; data-slide=&quot;next&quot;&gt;Next &amp;rsaquo;&lt;/a&gt;  
   &lt;/div&gt;
 &lt;/div&gt;</code></pre>
 
@@ -368,59 +347,53 @@ <h3>Code for this example:</h3>
 
 <h2>Arbitrary Content</h2>
 <p>Arbitrary content carousel with simple Previous / Next controls to advance between items.</p>
-<div class="m-carousel m-carousel-example-4 m-center m-fluid">
-  <!-- Carousel items -->
-  <div class="m-carousel-inner">
-    <div class="m-item">
-        <div class="card">
-          <h3>Williamsburg letterpress</h3>
-          <p>Retro blog cliche, direct trade fingerstache keffiyeh twee. Bicycle rights blog mustache, williamsburg scenester flexitarian cred twee pour-over letterpress pork belly. Beard williamsburg authentic fanny pack bespoke helvetica.</p>
+
+<div class="m-carousel m-center m-fluid m-carousel-example-4">
+    <div class="m-carousel-inner">
+        <div class="m-item">
+            <div class="card">
+                <h3>Williamsburg letterpress</h3>
+                <p>Retro blog cliche, direct trade fingerstache keffiyeh twee. Bicycle rights blog mustache, williamsburg scenester flexitarian cred twee pour-over letterpress pork belly. Beard williamsburg authentic fanny pack bespoke helvetica.</p>
+            </div>
         </div>
-    </div>
-    <div class="m-item">
-        <div class="card">
-          <h3>Bespoke fingerstache</h3>
-          <p>Brooklyn flexitarian street art bespoke wolf. Trust fund carles butcher pickled chillwave. Banksy 3 wolf moon seitan kale chips, cosby sweater butcher vice small batch raw denim post-ironic beard. Mcsweeney's thundercats brooklyn.</p>
+        <div class="m-item">
+            <div class="card">
+                <h3>Bespoke fingerstache</h3>
+                <p>Brooklyn flexitarian street art bespoke wolf. Trust fund carles butcher pickled chillwave. Banksy 3 wolf moon seitan kale chips, cosby sweater butcher vice small batch raw denim post-ironic beard. Mcsweeney's thundercats brooklyn.</p>
+            </div>
         </div>
     </div>
-  </div>
-  <!-- Carousel controls -->
-  <div class="m-carousel-controls">
-    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo; Previous</a>
-    <a class="carousel-control right" href="#myCarousel" data-slide="next">Next &rsaquo;</a>  
-  </div>
+    <div class="m-carousel-controls">
+        <a class="carousel-control left" href="#" data-slide="prev">&lsaquo; Previous</a>
+        <a class="carousel-control right" href="#" data-slide="next">Next &rsaquo;</a>  
+    </div>
 </div>
 
 <h3>Code for this example:</h3>
 <pre><code>&lt;div class=&quot;m-carousel m-center m-fluid&quot;&gt;
-  &lt;!-- Carousel items --&gt;
   &lt;div class=&quot;m-carousel-inner&quot;&gt;
     &lt;div class=&quot;m-item&quot;&gt;
-        &lt;div class=&quot;card&quot;&gt;
-          &lt;h3&gt;Heading 1&lt;/h3&gt;
-          &lt;p&gt;Slide content 1&lt;/p&gt;
-        &lt;/div&gt;
+      &lt;div class=&quot;card&quot;&gt;
+        &lt;h3&gt;Heading 1&lt;/h3&gt;
+        &lt;p&gt;Slide content 1&lt;/p&gt;
+      &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class=&quot;m-item&quot;&gt;
-        &lt;div class=&quot;card&quot;&gt;
-          &lt;h3&gt;Heading 2&lt;/h3&gt;
-          &lt;p&gt;Slide content 2&lt;/p&gt;
-        &lt;/div&gt;
+      &lt;div class=&quot;card&quot;&gt;
+        &lt;h3&gt;Heading 2&lt;/h3&gt;
+        &lt;p&gt;Slide content 2&lt;/p&gt;
+      &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
-  &lt;!-- Carousel controls --&gt;
   &lt;div class=&quot;m-carousel-controls&quot;&gt;
-    &lt;a class=&quot;carousel-control left&quot; href=&quot;#myCarousel&quot; data-slide=&quot;prev&quot;&gt;&amp;lsaquo; Previous&lt;/a&gt;
-    &lt;a class=&quot;carousel-control right&quot; href=&quot;#myCarousel&quot; data-slide=&quot;next&quot;&gt;Next &amp;rsaquo;&lt;/a&gt;  
+    &lt;a class=&quot;carousel-control left&quot; href=&quot;#&quot; data-slide=&quot;prev&quot;&gt;&amp;lsaquo; Previous&lt;/a&gt;
+    &lt;a class=&quot;carousel-control right&quot; href=&quot;#&quot; data-slide=&quot;next&quot;&gt;Next &amp;rsaquo;&lt;/a&gt;  
   &lt;/div&gt;
 &lt;/div&gt;</code></pre>
 
-
-
 <h2>Bulleted controls</h2>
 <p>Bulleted indicators for number of items and currently-selected item. Click to advance between items.</p>
-<div class="m-carousel m-carousel-example-5 m-center m-fluid">
-  <!-- Carousel items -->
+<div class="m-carousel m-center m-fluid m-carousel-example-5">
   <div class="m-carousel-inner">
     <div class="m-item">
         <img src="{{ site.baseurl }}/static/examples/img/helmets.jpg">
@@ -438,35 +411,32 @@ <h2>Bulleted controls</h2>
         <img src="{{ site.baseurl }}/static/examples/img/pods.jpg">
     </div>
   </div>
-  <!-- Carousel controls -->
   <div class="m-carousel-controls m-carousel-bulleted">
-    <a class="carousel-control right" href="#myCarousel" data-slide="1">1</a>
-    <a class="carousel-control right" href="#myCarousel" data-slide="2">2</a>
-    <a class="carousel-control right" href="#myCarousel" data-slide="3">3</a>
-    <a class="carousel-control right" href="#myCarousel" data-slide="4">4</a>
-    <a class="carousel-control right" href="#myCarousel" data-slide="5">5</a>
+    <a class="carousel-control right" href="#" data-slide="1">1</a>
+    <a class="carousel-control right" href="#" data-slide="2">2</a>
+    <a class="carousel-control right" href="#" data-slide="3">3</a>
+    <a class="carousel-control right" href="#" data-slide="4">4</a>
+    <a class="carousel-control right" href="#" data-slide="5">5</a>
   </div>
 </div>
 
 <h3>Code for this example:</h3>
 <pre><code>&lt;div class=&quot;m-carousel m-center m-fluid&quot;&gt;
-  &lt;!-- Carousel items --&gt;
   &lt;div class=&quot;m-carousel-inner&quot;&gt;
     &lt;div class=&quot;m-item&quot;&gt;
-        &lt;img src=&quot;image1.jpg&quot;&gt;
+      &lt;img src=&quot;image1.jpg&quot;&gt;
     &lt;/div&gt;
     &lt;div class=&quot;m-item&quot;&gt;
-        &lt;img src=&quot;image2.jpg&quot;&gt;
+      &lt;img src=&quot;image2.jpg&quot;&gt;
     &lt;/div&gt;
     &lt;div class=&quot;m-item&quot;&gt;
-        &lt;img src=&quot;image3.jpg&quot;&gt;
+      &lt;img src=&quot;image3.jpg&quot;&gt;
     &lt;/div&gt;
   &lt;/div&gt;
-  &lt;!-- Carousel controls --&gt;
   &lt;div class=&quot;m-carousel-controls m-carousel-bulleted&quot;&gt;
-    &lt;a class=&quot;carousel-control right&quot; href=&quot;#myCarousel&quot; data-slide=&quot;1&quot;&gt;1&lt;/a&gt;
-    &lt;a class=&quot;carousel-control right&quot; href=&quot;#myCarousel&quot; data-slide=&quot;2&quot;&gt;2&lt;/a&gt;
-    &lt;a class=&quot;carousel-control right&quot; href=&quot;#myCarousel&quot; data-slide=&quot;3&quot;&gt;3&lt;/a&gt;
+    &lt;a class=&quot;carousel-control right&quot; href=&quot;#&quot; data-slide=&quot;1&quot;&gt;1&lt;/a&gt;
+    &lt;a class=&quot;carousel-control right&quot; href=&quot;#&quot; data-slide=&quot;2&quot;&gt;2&lt;/a&gt;
+    &lt;a class=&quot;carousel-control right&quot; href=&quot;#&quot; data-slide=&quot;3&quot;&gt;3&lt;/a&gt;
   &lt;/div&gt;
 &lt;/div&gt;</code></pre>
 
@@ -475,117 +445,101 @@ <h3>Code for this example:</h3>
 <h2>Numbered pagination-style controls</h2>
 <p>Numbered pagination controls for each item, with flanking Previous / Next controls.</p>
 <div class="m-carousel m-carousel-example-6 m-center m-fluid">
-  <!-- Carousel items -->
-  <div class="m-carousel-inner">
-    <div class="m-item">
-        <img src="{{ site.baseurl }}/static/examples/img/parliament.jpg">
-    </div>
-    <div class="m-item">
-        <img src="{{ site.baseurl }}/static/examples/img/blossoms.jpg">
-    </div>
-    <div class="m-item">
-        <img src="{{ site.baseurl }}/static/examples/img/glacier.jpg">
-    </div>
-    <div class="m-item">
-        <img src="{{ site.baseurl }}/static/examples/img/helmets.jpg">
+    <div class="m-carousel-inner">
+        <div class="m-item">
+            <img src="{{ site.baseurl }}/static/examples/img/parliament.jpg">
+        </div>
+        <div class="m-item">
+            <img src="{{ site.baseurl }}/static/examples/img/blossoms.jpg">
+        </div>
+        <div class="m-item">
+            <img src="{{ site.baseurl }}/static/examples/img/glacier.jpg">
+        </div>
+        <div class="m-item">
+            <img src="{{ site.baseurl }}/static/examples/img/helmets.jpg">
+        </div>
+        <div class="m-item">
+            <img src="{{ site.baseurl }}/static/examples/img/pods.jpg">
+        </div>
     </div>
-    <div class="m-item">
-        <img src="{{ site.baseurl }}/static/examples/img/pods.jpg">
+    <div class="m-carousel-controls m-carousel-pagination">
+        <a class="carousel-control left" href="#" data-slide="prev">Previous</a>
+        <a class="carousel-control right" href="#" data-slide="1">1</a>
+        <a class="carousel-control right" href="#" data-slide="2">2</a>
+        <a class="carousel-control right" href="#" data-slide="3">3</a>
+        <a class="carousel-control right" href="#" data-slide="4">4</a>
+        <a class="carousel-control right" href="#" data-slide="5">5</a>
+        <a class="carousel-control right" href="#" data-slide="next">Next</a>
     </div>
-  </div>
-  <!-- Carousel controls -->
-  <div class="m-carousel-controls m-carousel-pagination">
-    <a class="carousel-control left" href="#myCarousel" data-slide="prev">Previous</a>
-    <a class="carousel-control right" href="#myCarousel" data-slide="1">1</a>
-    <a class="carousel-control right" href="#myCarousel" data-slide="2">2</a>
-    <a class="carousel-control right" href="#myCarousel" data-slide="3">3</a>
-    <a class="carousel-control right" href="#myCarousel" data-slide="4">4</a>
-    <a class="carousel-control right" href="#myCarousel" data-slide="5">5</a>
-    <a class="carousel-control right" href="#myCarousel" data-slide="next">Next</a>  
-  </div>
 </div>
 
 <h3>Code for this example:</h3>
 <pre><code>&lt;div class=&quot;m-carousel m-center m-fluid&quot;&gt;
-  &lt;!-- Carousel items --&gt;
   &lt;div class=&quot;m-carousel-inner&quot;&gt;
     &lt;div class=&quot;m-item&quot;&gt;
-        &lt;img src=&quot;image1.jpg&quot;&gt;
+      &lt;img src=&quot;image1.jpg&quot;&gt;
     &lt;/div&gt;
     &lt;div class=&quot;m-item&quot;&gt;
-        &lt;img src=&quot;image2.jpg&quot;&gt;
+      &lt;img src=&quot;image2.jpg&quot;&gt;
     &lt;/div&gt;
     &lt;div class=&quot;m-item&quot;&gt;
-        &lt;img src=&quot;image3.jpg&quot;&gt;
+      &lt;img src=&quot;image3.jpg&quot;&gt;
     &lt;/div&gt;
   &lt;/div&gt;
-  &lt;!-- Carousel controls --&gt;
   &lt;div class=&quot;m-carousel-controls m-carousel-pagination&quot;&gt;
-    &lt;a class=&quot;carousel-control left&quot; href=&quot;#myCarousel&quot; data-slide=&quot;prev&quot;&gt;Previous&lt;/a&gt;
-    &lt;a class=&quot;carousel-control right&quot; href=&quot;#myCarousel&quot; data-slide=&quot;1&quot;&gt;1&lt;/a&gt;
-    &lt;a class=&quot;carousel-control right&quot; href=&quot;#myCarousel&quot; data-slide=&quot;2&quot;&gt;2&lt;/a&gt;
-    &lt;a class=&quot;carousel-control right&quot; href=&quot;#myCarousel&quot; data-slide=&quot;3&quot;&gt;3&lt;/a&gt;
-    &lt;a class=&quot;carousel-control right&quot; href=&quot;#myCarousel&quot; data-slide=&quot;next&quot;&gt;Next&lt;/a&gt;  
+    &lt;a class=&quot;carousel-control left&quot; href=&quot;#&quot; data-slide=&quot;prev&quot;&gt;Previous&lt;/a&gt;
+    &lt;a class=&quot;carousel-control right&quot; href=&quot;#&quot; data-slide=&quot;1&quot;&gt;1&lt;/a&gt;
+    &lt;a class=&quot;carousel-control right&quot; href=&quot;#&quot; data-slide=&quot;2&quot;&gt;2&lt;/a&gt;
+    &lt;a class=&quot;carousel-control right&quot; href=&quot;#&quot; data-slide=&quot;3&quot;&gt;3&lt;/a&gt;
+    &lt;a class=&quot;carousel-control right&quot; href=&quot;#&quot; data-slide=&quot;next&quot;&gt;Next&lt;/a&gt;  
   &lt;/div&gt;
 &lt;/div&gt;</code></pre>
 
 
-
 <h2>HUD-style Controls</h2>
 <p>Previous and Next render as heads-up controls that display on hover events. Since hover events don't work on mobile, simply swipe to advance.</p>
-<div class="m-carousel m-carousel-example-7 m-center m-fluid">
-  <!-- Carousel items -->
-  <div class="m-carousel-inner">
-    <div class="m-item">
-        <img src="{{ site.baseurl }}/static/examples/img/pods.jpg">
-    </div>
-    <div class="m-item">
-        <img src="{{ site.baseurl }}/static/examples/img/blossoms.jpg">
-    </div>
-    <div class="m-item">
-        <img src="{{ site.baseurl }}/static/examples/img/glacier.jpg">
-    </div>
-    <div class="m-item">
-        <img src="{{ site.baseurl }}/static/examples/img/helmets.jpg">
+<div class="m-carousel m-center m-fluid m-carousel-example-7">
+    <div class="m-carousel-inner">
+        <div class="m-item">
+            <img src="{{ site.baseurl }}/static/examples/img/pods.jpg">
+        </div>
+        <div class="m-item">
+            <img src="{{ site.baseurl }}/static/examples/img/blossoms.jpg">
+        </div>
+        <div class="m-item">
+            <img src="{{ site.baseurl }}/static/examples/img/glacier.jpg">
+        </div>
+        <div class="m-item">
+            <img src="{{ site.baseurl }}/static/examples/img/helmets.jpg">
+        </div>
+        <div class="m-item">
+            <img src="{{ site.baseurl }}/static/examples/img/parliament.jpg">
+        </div>
     </div>
-    <div class="m-item">
-        <img src="{{ site.baseurl }}/static/examples/img/parliament.jpg">
+    <div class="m-carousel-controls m-carousel-hud">
+        <a class="m-carousel-control m-carousel-prev" href="#" data-slide="prev">Previous</a>
+        <a class="m-carousel-control m-carousel-next" href="#" data-slide="next">Next</a>
     </div>
-  </div>
-  <!-- Carousel controls -->
-  <div class="m-carousel-controls m-carousel-hud">
-      <a class="m-carousel-control m-carousel-prev" href="#myCarousel" data-slide="prev">Previous</a>
-      <a class="m-carousel-control m-carousel-next" href="#myCarousel" data-slide="next">Next</a>
-  </div>
 </div>
 
 <h3>Code for this example:</h3>
 <pre><code>&lt;div class=&quot;m-carousel m-center m-fluid&quot;&gt;
-  &lt;!-- Carousel items --&gt;
   &lt;div class=&quot;m-carousel-inner&quot;&gt;
     &lt;div class=&quot;m-item&quot;&gt;
-        &lt;img src=&quot;image1&quot;&gt;
+      &lt;img src=&quot;image1&quot;&gt;
     &lt;/div&gt;
     &lt;div class=&quot;m-item&quot;&gt;
-        &lt;img src=&quot;image2&quot;&gt;
+      &lt;img src=&quot;image2&quot;&gt;
     &lt;/div&gt;
     &lt;div class=&quot;m-item&quot;&gt;
-        &lt;img src=&quot;image3&quot;&gt;
+      &lt;img src=&quot;image3&quot;&gt;
     &lt;/div&gt;
   &lt;/div&gt;
-  &lt;!-- Carousel controls --&gt;
   &lt;div class=&quot;m-carousel-controls m-carousel-hud&quot;&gt;
-      &lt;a class=&quot;m-carousel-control m-carousel-prev&quot; href=&quot;#myCarousel&quot; data-slide=&quot;prev&quot;&gt;Previous&lt;/a&gt;
-      &lt;a class=&quot;m-carousel-control m-carousel-next&quot; href=&quot;#myCarousel&quot; data-slide=&quot;next&quot;&gt;Next&lt;/a&gt;
+    &lt;a class=&quot;m-carousel-control m-carousel-prev&quot; href=&quot;#&quot; data-slide=&quot;prev&quot;&gt;Previous&lt;/a&gt;
+    &lt;a class=&quot;m-carousel-control m-carousel-next&quot; href=&quot;#&quot; data-slide=&quot;next&quot;&gt;Next&lt;/a&gt;
   &lt;/div&gt;
 &lt;/div&gt;</code></pre>
 
-
-
-
-
-
 <script src="{{ site.baseurl }}/static/examples/js/carousel.js"></script>
-<script>
-    $(function() { $('.m-carousel').carousel(); });
-</script>
+<script>$('.m-carousel').carousel();</script>
\ No newline at end of file
diff --git a/www/modules/carousel.md b/www/modules/carousel.md
index baeed229..18e4d2d4 100644
--- a/www/modules/carousel.md
+++ b/www/modules/carousel.md
@@ -27,8 +27,8 @@ title: Mobify.js Carousel Module
 
 # Carousel
 
-A configurable rotating content carousel module. Images and arbitrary 
-content may be used.
+A configurable rotating content carousel for displaying images or
+arbitrary content.
 
 <div class="m-carousel m-carousel-example-4 m-center m-fluid">
   <div class="m-carousel-inner">
@@ -58,7 +58,7 @@ content may be used.
 </div>
 
 <div class="btn-container">
-	<a href="{{ site.baseurl }}/modules/carousel-examples" class="btn btn-primary">Download Carousel</a>
+	<a href="{{ site.baseurl }}/static/downloads/carousel.zip" class="btn btn-primary">Download Carousel</a>
 	<a href="{{ site.baseurl }}/modules/carousel-examples" class="see-examples">See more examples</a>
 </div>
 
@@ -69,30 +69,32 @@ content may be used.
 
     <!-- the viewport -->
     <div class="m-carousel">
-        <!-- the slider -->
-        <div class="m-carousel-inner">
-            <!-- the items -->
-            <div class="m-item m-active">
-                <img src="1.jpg">
-            </div>
-            <div class="m-item">
-                <img src="2.jpg">
-            </div>
-            <div class="m-item">
-                <img src="3.jpg">
-            </div>
+      <!-- the slider -->
+      <div class="m-carousel-inner">
+        <!-- the items -->
+        <div class="m-item m-active">
+          <img src="earth.jpg">
         </div>
-        <div>
-            <!-- use the `data-slide` attribute to create controls -->
-            <a href="#" data-slide="prev">Previous</a>
-            <a href="#" data-slide="1" class="m-active">1</a>
-            <a href="#" data-slide="2">2</a>
-            <a href="#" data-slide="3">3</a>
-            <a href="#" data-slide="next">Next</a>
+        <div class="m-item">
+          <img src="wind.jpg">
         </div>
+        <div class="m-item">
+          <img src="fire.jpg">
+        </div>
+      </div>
+      <div>
+        <!-- use the `data-slide` attribute to create controls -->
+        <a href="#" data-slide="prev">Previous</a>
+        <a href="#" data-slide="1" class="m-active">earth</a>
+        <a href="#" data-slide="2">wind</a>
+        <a href="#" data-slide="3">fire</a>
+        <a href="#" data-slide="next">Next</a>
+      </div>
     </div>
 
-    <!-- include the JavaScript -->
+    <!-- include zepto.js or jquery.js -->
+    <script src="zepto.js"></script>
+    <!-- include carousel.js -->
     <script src="carousel.js"></script>
     <!-- construct the carousel -->
     <script>$('.m-carousel').carousel()</script>
@@ -100,7 +102,10 @@ content may be used.
 
 ## Classes
 
-To control the styling of the carousel add the following classes to the
+By default, items are center aligned and their width is determined by
+their content width and/or any styling that restricts their width.
+
+To change the styling of the items, add the following classes to the 
 viewport:
 
 | Class       | Description                                            |
@@ -108,8 +113,6 @@ viewport:
 | `.m-fluid`  | Causes the width of items to resize to match the viewport width. |
 | `.m-center` | Causes the items to be center aligned, not left aligned (the default). | 
 
-By default, the width of the items is determined by the content width
-and/or by any styling that restricts its width.
 
 ## Methods
 
@@ -146,7 +149,7 @@ Moves the carousel one item to the left.
 
 ### .carousel('move', x)
 
-Moves the carousel to a specific index (1-based).
+Moves the carousel to a index `x` (1-based).
 
     $('.m-carousel').carousel('move', 1);
 
@@ -178,7 +181,46 @@ The viewport emits the following events:
 | beforeSlide   | previousIndex, newIndex   | Fired before the carousel moves.          |
 | afterSlide    | previousIndex, newIndex   | Fired after the carousel begins moving.   |
 
-## Compatability
+## Browser Compatability
+
+### Mobile Browsers
+
+The following mobile browsers are fully supported:
+
+| Browser           | Version |
+|-------------------|---------|
+| Mobile Safari     | 3.1.3+  |
+| Android Browser   | 2.1+    |
+| Android Chrome    | 1.0+    |
+| Android Firefox   | 1.0+    |
+
+The following mobile browsers have degraded support:
+
+| Browser           | Version |
+|-------------------|---------|
+| Windows Phone     | 7.5     |
+
+### Desktop Browsers
+
+The follow desktop browsers are fully supported:
+
+| Browser           | Version |
+|-------------------|---------|
+| Safari            | 4.0+    |
+| Firefox           | 4.0+    |
+| Chrome            | 12.0+   |
+| Opera             | 12.0+   |
+| Internet Explorer | 10.0+   |
+
+The following desktop browsers have degraded support:
+
+| Browser           | Version |
+|-------------------|---------|
+| Internet Explorer | 8.0,9.0 |
+| Firefox           | 3.5,3.6 |
+
+
+<!--
 
 | Browser           | Version | Support               |
 |-------------------|---------|-----------------------|
@@ -197,5 +239,7 @@ The viewport emits the following events:
 | Firefox (Android) | 1.0+    | Supported             |
 | Windows Phone     | 7.5     | Degraded. No transitions. No touch (dragging). Next/Previous must be provided. |
 
+-->
+
 <script src="{{ site.baseurl }}/static/examples/js/carousel.js"></script>
 <script>$('.m-carousel').carousel();</script>
\ No newline at end of file
diff --git a/www/modules/index.md b/www/modules/index.md
index d7e64d30..ed1472c6 100644
--- a/www/modules/index.md
+++ b/www/modules/index.md
@@ -5,15 +5,14 @@ title: Mobify.js Modules
 
 # Mobify.js Modules
 
-A growing library of customizable user interface modules. Mobify.js 
-modules were built mobile-first and tested across a wide range of 
-devices, while also providing a seamless desktop experience. They can 
-be used with Mobify.js-powered mobile sites or as standalone components 
-on any site.
+A library of customizable user interface modules built for mobile-first 
+and tested across a wide range of devices, while also providing a seamless 
+desktop experience. They can be used as standalone components or with any
+Mobify.js-powered site.
 
-All modules available on GitHub and published under an <a href="{{ site.baseurl }}/license/">MIT license</a>:
+All modules require either the [Zepto](http://zeptojs.com/) or [jQuery](http://jquery.com/) library.
 
-[github.com/mobify/mobifyjs/modules](https://github.com/mobify/mobifyjs/modules)
+All modules available on GitHub and published under an [MIT license]({{ site.baseurl }}/license/):
 
-----
+[github.com/mobify/mobifyjs/modules](https://github.com/mobify/mobifyjs/modules)
 

From 412ca50a8c9b7823cc2af705bc92c300037bcb5e Mon Sep 17 00:00:00 2001
From: John Boxall <john@mobify.me>
Date: Wed, 1 Aug 2012 10:52:08 -0700
Subject: [PATCH 2/3] Reorder carousel examples.

---
 www/modules/carousel-examples.html            | 428 ++++++++----------
 www/modules/carousel.md                       |  12 +-
 www/static/examples/css/carousel-controls.css |   3 +
 3 files changed, 209 insertions(+), 234 deletions(-)

diff --git a/www/modules/carousel-examples.html b/www/modules/carousel-examples.html
index fa98a23a..ba14aedf 100644
--- a/www/modules/carousel-examples.html
+++ b/www/modules/carousel-examples.html
@@ -35,6 +35,7 @@
 .m-carousel {
   padding-bottom: 30px;
 }
+
 .card, .slide {
   background: rgba(0,0,0,0.5);
   padding: 20px 30px;
@@ -46,6 +47,7 @@
 .m-fluid .m-item {
   margin-right: 20px;
 }
+
   .m-item img, .m-item .card, .m-item .slide {
     -webkit-box-shadow: rgba(0,0,0,0.5) 0 5px 10px;
     -moz-box-shadow: rgba(0,0,0,0.5) 0 5px 10px;
@@ -86,12 +88,14 @@
 
 <h1>Carousel Examples</h1>
 
-<p>Examples of the rotating image carousel module in action. Sample code provided.</p>
+<p>Examples of the rotating image carousel module in action. Sample code provided!</p>
+
+<p>To use any of the following examples be sure to include `carousel.css` and </p>
 
-<h2>Previous/Next controls</h2>
+<h2>Previous / Next controls</h2>
 <p>Carousel with Previous / Next controls to advance between items.</p>
 
-<div class="m-carousel m-center m-fluid m-carousel-example-1">
+<div class="m-carousel m-fluid m-carousel-example-1">
   <div class="m-carousel-inner">
     <div class="m-item">
         <img src="{{ site.baseurl }}/static/examples/img/blossoms.jpg">
@@ -110,13 +114,13 @@ <h2>Previous/Next controls</h2>
     </div>
   </div>
   <div class="m-carousel-controls">
-    <a class="carousel-control left" href="#" data-slide="prev">&lsaquo; Previous</a>
-    <a class="carousel-control right" href="#" data-slide="next">Next &rsaquo;</a>  
+    <a href="#" data-slide="prev">&lsaquo; Previous</a>
+    <a href="#" data-slide="next">Next &rsaquo;</a>  
   </div>
 </div>
 
 <h3>Code for this example:</h3>
-<pre><code>&lt;div class="m-carousel m-center m-fluid"&gt;
+<pre><code>&lt;div class="m-carousel m-fluid"&gt;
   &lt;div class=&quot;m-carousel-inner&quot;&gt;
     &lt;div class=&quot;m-item&quot;&gt;
         &lt;img src=&quot;image1.jpg&quot;&gt;
@@ -130,8 +134,158 @@ <h3>Code for this example:</h3>
   &lt;/div&gt;
   &lt;!-- use the `data-slide` attribute to create controls --&gt;
   &lt;div class=&quot;m-carousel-controls&quot;&gt;
-    &lt;a class=&quot;carousel-control left&quot; href=&quot;#&quot; data-slide=&quot;prev&quot;&gt;&amp;lsaquo; Previous&lt;/a&gt;
-    &lt;a class=&quot;carousel-control right&quot; href=&quot;#&quot; data-slide=&quot;next&quot;&gt;Next &amp;rsaquo;&lt;/a&gt;  
+    &lt;a href=&quot;#&quot; data-slide=&quot;prev&quot;&gt;&amp;lsaquo; Previous&lt;/a&gt;
+    &lt;a href=&quot;#&quot; data-slide=&quot;next&quot;&gt;Next &amp;rsaquo;&lt;/a&gt;  
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+<h2>Bulleted controls</h2>
+<p>Bulleted indicators for number of items and currently-selected item. Click to advance between items.</p>
+<div class="m-carousel m-fluid m-carousel-example-5">
+  <div class="m-carousel-inner">
+    <div class="m-item">
+        <img src="{{ site.baseurl }}/static/examples/img/helmets.jpg">
+    </div>
+    <div class="m-item">
+        <img src="{{ site.baseurl }}/static/examples/img/blossoms.jpg">
+    </div>
+    <div class="m-item">
+        <img src="{{ site.baseurl }}/static/examples/img/glacier.jpg">
+    </div>
+    <div class="m-item">
+        <img src="{{ site.baseurl }}/static/examples/img/parliament.jpg">
+    </div>
+    <div class="m-item">
+        <img src="{{ site.baseurl }}/static/examples/img/pods.jpg">
+    </div>
+  </div>
+  <div class="m-carousel-controls m-carousel-bulleted">
+    <a href="#" data-slide="1">1</a>
+    <a href="#" data-slide="2">2</a>
+    <a href="#" data-slide="3">3</a>
+    <a href="#" data-slide="4">4</a>
+    <a href="#" data-slide="5">5</a>
+  </div>
+</div>
+
+<h3>Code for this example:</h3>
+<pre><code>&lt;div class=&quot;m-carousel m-fluid&quot;&gt;
+  &lt;div class=&quot;m-carousel-inner&quot;&gt;
+    &lt;div class=&quot;m-item&quot;&gt;
+      &lt;img src=&quot;image1.jpg&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;m-item&quot;&gt;
+      &lt;img src=&quot;image2.jpg&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;m-item&quot;&gt;
+      &lt;img src=&quot;image3.jpg&quot;&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;m-carousel-controls m-carousel-bulleted&quot;&gt;
+    &lt;a href=&quot;#&quot; data-slide=&quot;1&quot;&gt;1&lt;/a&gt;
+    &lt;a href=&quot;#&quot; data-slide=&quot;2&quot;&gt;2&lt;/a&gt;
+    &lt;a href=&quot;#&quot; data-slide=&quot;3&quot;&gt;3&lt;/a&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+
+
+<h2>Numbered pagination-style controls</h2>
+<p>Numbered pagination controls for each item, with flanking Previous / Next controls.</p>
+<div class="m-carousel m-carousel-example-6 m-fluid">
+    <div class="m-carousel-inner">
+        <div class="m-item">
+            <img src="{{ site.baseurl }}/static/examples/img/parliament.jpg">
+        </div>
+        <div class="m-item">
+            <img src="{{ site.baseurl }}/static/examples/img/blossoms.jpg">
+        </div>
+        <div class="m-item">
+            <img src="{{ site.baseurl }}/static/examples/img/glacier.jpg">
+        </div>
+        <div class="m-item">
+            <img src="{{ site.baseurl }}/static/examples/img/helmets.jpg">
+        </div>
+        <div class="m-item">
+            <img src="{{ site.baseurl }}/static/examples/img/pods.jpg">
+        </div>
+    </div>
+    <div class="m-carousel-controls m-carousel-pagination">
+        <a href="#" data-slide="prev">Previous</a>
+        <a href="#" data-slide="1">1</a>
+        <a href="#" data-slide="2">2</a>
+        <a href="#" data-slide="3">3</a>
+        <a href="#" data-slide="4">4</a>
+        <a href="#" data-slide="5">5</a>
+        <a href="#" data-slide="next">Next</a>
+    </div>
+</div>
+
+<h3>Code for this example:</h3>
+<pre><code>&lt;div class=&quot;m-carousel m-fluid&quot;&gt;
+  &lt;div class=&quot;m-carousel-inner&quot;&gt;
+    &lt;div class=&quot;m-item&quot;&gt;
+      &lt;img src=&quot;image1.jpg&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;m-item&quot;&gt;
+      &lt;img src=&quot;image2.jpg&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;m-item&quot;&gt;
+      &lt;img src=&quot;image3.jpg&quot;&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;m-carousel-controls m-carousel-pagination&quot;&gt;
+    &lt;a href=&quot;#&quot; data-slide=&quot;prev&quot;&gt;Previous&lt;/a&gt;
+    &lt;a href=&quot;#&quot; data-slide=&quot;1&quot;&gt;1&lt;/a&gt;
+    &lt;a href=&quot;#&quot; data-slide=&quot;2&quot;&gt;2&lt;/a&gt;
+    &lt;a href=&quot;#&quot; data-slide=&quot;3&quot;&gt;3&lt;/a&gt;
+    &lt;a href=&quot;#&quot; data-slide=&quot;next&quot;&gt;Next&lt;/a&gt;  
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+
+<h2>HUD-style Controls</h2>
+<p>Previous and Next render as heads-up controls that display on hover events. Since hover events don't work on mobile, simply swipe to advance.</p>
+<div class="m-carousel m-fluid m-carousel-example-7">
+    <div class="m-carousel-inner">
+        <div class="m-item">
+            <img src="{{ site.baseurl }}/static/examples/img/pods.jpg">
+        </div>
+        <div class="m-item">
+            <img src="{{ site.baseurl }}/static/examples/img/blossoms.jpg">
+        </div>
+        <div class="m-item">
+            <img src="{{ site.baseurl }}/static/examples/img/glacier.jpg">
+        </div>
+        <div class="m-item">
+            <img src="{{ site.baseurl }}/static/examples/img/helmets.jpg">
+        </div>
+        <div class="m-item">
+            <img src="{{ site.baseurl }}/static/examples/img/parliament.jpg">
+        </div>
+    </div>
+    <div class="m-carousel-controls m-carousel-hud">
+        <a class="m-carousel-prev" href="#" data-slide="prev">Previous</a>
+        <a class="m-carousel-next" href="#" data-slide="next">Next</a>
+    </div>
+</div>
+
+<h3>Code for this example:</h3>
+<pre><code>&lt;div class=&quot;m-carousel m-fluid&quot;&gt;
+  &lt;div class=&quot;m-carousel-inner&quot;&gt;
+    &lt;div class=&quot;m-item&quot;&gt;
+      &lt;img src=&quot;image1&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;m-item&quot;&gt;
+      &lt;img src=&quot;image2&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;m-item&quot;&gt;
+      &lt;img src=&quot;image3&quot;&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;m-carousel-controls m-carousel-hud&quot;&gt;
+    &lt;a class=&quot;m-carousel-prev&quot; href=&quot;#&quot; data-slide=&quot;prev&quot;&gt;Previous&lt;/a&gt;
+    &lt;a class=&quot;m-carousel-next&quot; href=&quot;#&quot; data-slide=&quot;next&quot;&gt;Next&lt;/a&gt;
   &lt;/div&gt;
 &lt;/div&gt;</code></pre>
 
@@ -174,8 +328,8 @@ <h2>Fixed Width Items</h2>
         </div>
     </div>
     <div class="m-carousel-controls">
-        <a class="carousel-control left" href="#" data-slide="prev">&lsaquo; Previous</a>
-        <a class="carousel-control right" href="#" data-slide="next">Next &rsaquo;</a>  
+        <a href="#" data-slide="prev">&lsaquo; Previous</a>
+        <a href="#" data-slide="next">Next &rsaquo;</a>  
     </div>
 </div>
 
@@ -200,12 +354,7 @@ <h3>Code for this example:</h3>
         &lt;p&gt;Caption #3&lt;/p&gt;
       &lt;/div&gt;
     &lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div class=&quot;m-carousel-controls&quot;&gt;
-    &lt;a class=&quot;carousel-control left&quot; href=&quot;#&quot; data-slide=&quot;prev&quot;&gt;&amp;lsaquo; Previous&lt;/a&gt;
-    &lt;a class=&quot;carousel-control right&quot; href=&quot;#&quot; data-slide=&quot;next&quot;&gt;Next &amp;rsaquo;&lt;/a&gt;  
-  &lt;/div&gt;
-&lt;/div&gt;</code></pre>
+  &lt;/div&gt;</code></pre>
 
 <h2>Scaled Transitions</h2>
 <p>Display the current item larger than the rest, and animate the transition between each with the <code>m-scaled</code> class.</p>
@@ -244,8 +393,8 @@ <h2>Scaled Transitions</h2>
         </div>
     </div>
     <div class="m-carousel-controls">
-        <a class="carousel-control left" href="#" data-slide="prev">&lsaquo; Previous</a>
-        <a class="carousel-control right" href="#" data-slide="next">Next &rsaquo;</a>  
+        <a href="#" data-slide="prev">&lsaquo; Previous</a>
+        <a href="#" data-slide="next">Next &rsaquo;</a>  
     </div>
 </div>
 
@@ -270,59 +419,42 @@ <h3>Code for this example:</h3>
         &lt;p&gt;Caption #3&lt;/p&gt;
       &lt;/div&gt;
     &lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div class=&quot;m-carousel-controls&quot;&gt;
-    &lt;a class=&quot;carousel-control left&quot; href=&quot;#&quot; data-slide=&quot;prev&quot;&gt;&amp;lsaquo; Previous&lt;/a&gt;
-    &lt;a class=&quot;carousel-control right&quot; href=&quot;#&quot; data-slide=&quot;next&quot;&gt;Next &amp;rsaquo;&lt;/a&gt;  
-  &lt;/div&gt;
-&lt;/div&gt;</code></pre>
+  &lt;/div&gt;</code></pre>
 
 
 <h2>Image + Caption</h2>
 <p>Image carousel containing textual captions with simple Previous / Next controls to advance between items.</p>
-<div class="m-carousel m-carousel-example-3 m-center m-fluid">
-  <!-- Carousel items -->
-  <div class="m-carousel-inner">
-    <div class="m-item">
-      <p class="caption">
-        Fox Glacier
-      </p>
-      <img src="{{ site.baseurl }}/static/examples/img/glacier.jpg">
-    </div>
-    <div class="m-item">
-      <p class="caption">
-        Wall Centre Blossoms
-      </p>
-      <img src="{{ site.baseurl }}/static/examples/img/blossoms.jpg">
-    </div>
-    <div class="m-item">
-      <p class="caption">
-        Helmets
-      </p>
-      <img src="{{ site.baseurl }}/static/examples/img/helmets.jpg">
-    </div>
-    <div class="m-item">
-      <p class="caption">
-        Parliament Buildings
-      </p>
-      <img src="{{ site.baseurl }}/static/examples/img/parliament.jpg">
+<div class="m-carousel m-fluid m-carousel-example-3">
+    <div class="m-carousel-inner">
+        <div class="m-item">
+            <p class="caption">Fox Glacier</p>
+            <img src="{{ site.baseurl }}/static/examples/img/glacier.jpg">
+        </div>
+        <div class="m-item">
+            <p class="caption">Wall Centre Blossoms</p>
+            <img src="{{ site.baseurl }}/static/examples/img/blossoms.jpg">
+        </div>
+        <div class="m-item">
+            <p class="caption">Helmets</p>
+            <img src="{{ site.baseurl }}/static/examples/img/helmets.jpg">
+        </div>
+        <div class="m-item">
+            <p class="caption">Parliament Buildings</p>
+            <img src="{{ site.baseurl }}/static/examples/img/parliament.jpg">
+        </div>
+        <div class="m-item">
+            <p class="caption">Pods</p>
+            <img src="{{ site.baseurl }}/static/examples/img/pods.jpg">
+        </div>
     </div>
-    <div class="m-item">
-      <p class="caption">
-        Pods
-      </p>
-      <img src="{{ site.baseurl }}/static/examples/img/pods.jpg">
+    <div class="m-carousel-controls">
+        <a href="#" data-slide="prev">&lsaquo; Previous</a>
+        <a href="#" data-slide="next">Next &rsaquo;</a>  
     </div>
-  </div>
-  <!-- Carousel controls -->
-  <div class="m-carousel-controls">
-    <a class="carousel-control left" href="#" data-slide="prev">&lsaquo; Previous</a>
-    <a class="carousel-control right" href="#" data-slide="next">Next &rsaquo;</a>  
-  </div>
 </div>
 
 <h3>Code for this example:</h3>
-<pre><code>&lt;div class=&quot;m-carousel m-center m-fluid&quot;&gt;
+<pre><code>&lt;div class=&quot;m-carousel m-fluid&quot;&gt;
   &lt;div class=&quot;m-carousel-inner&quot;&gt;
     &lt;div class=&quot;m-item&quot;&gt;
       &lt;p class=&quot;caption&quot;&gt;Caption #1&lt;/p&gt;
@@ -336,19 +468,14 @@ <h3>Code for this example:</h3>
       &lt;p class=&quot;caption&quot;&gt;Caption #3&lt;/p&gt;
       &lt;img src=&quot;image3.jpg&quot;&gt;
     &lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div class=&quot;m-carousel-controls&quot;&gt;
-    &lt;a class=&quot;carousel-control left&quot; href=&quot;#&quot; data-slide=&quot;prev&quot;&gt;&amp;lsaquo; Previous&lt;/a&gt;
-    &lt;a class=&quot;carousel-control right&quot; href=&quot;#&quot; data-slide=&quot;next&quot;&gt;Next &amp;rsaquo;&lt;/a&gt;  
-  &lt;/div&gt;
-&lt;/div&gt;</code></pre>
+  &lt;/div&gt;</code></pre>
 
 
 
 <h2>Arbitrary Content</h2>
 <p>Arbitrary content carousel with simple Previous / Next controls to advance between items.</p>
 
-<div class="m-carousel m-center m-fluid m-carousel-example-4">
+<div class="m-carousel m-fluid m-carousel-example-4">
     <div class="m-carousel-inner">
         <div class="m-item">
             <div class="card">
@@ -364,13 +491,13 @@ <h3>Bespoke fingerstache</h3>
         </div>
     </div>
     <div class="m-carousel-controls">
-        <a class="carousel-control left" href="#" data-slide="prev">&lsaquo; Previous</a>
-        <a class="carousel-control right" href="#" data-slide="next">Next &rsaquo;</a>  
+        <a href="#" data-slide="prev">&lsaquo; Previous</a>
+        <a href="#" data-slide="next">Next &rsaquo;</a>  
     </div>
 </div>
 
 <h3>Code for this example:</h3>
-<pre><code>&lt;div class=&quot;m-carousel m-center m-fluid&quot;&gt;
+<pre><code>&lt;div class=&quot;m-carousel m-fluid&quot;&gt;
   &lt;div class=&quot;m-carousel-inner&quot;&gt;
     &lt;div class=&quot;m-item&quot;&gt;
       &lt;div class=&quot;card&quot;&gt;
@@ -384,162 +511,7 @@ <h3>Code for this example:</h3>
         &lt;p&gt;Slide content 2&lt;/p&gt;
       &lt;/div&gt;
     &lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div class=&quot;m-carousel-controls&quot;&gt;
-    &lt;a class=&quot;carousel-control left&quot; href=&quot;#&quot; data-slide=&quot;prev&quot;&gt;&amp;lsaquo; Previous&lt;/a&gt;
-    &lt;a class=&quot;carousel-control right&quot; href=&quot;#&quot; data-slide=&quot;next&quot;&gt;Next &amp;rsaquo;&lt;/a&gt;  
-  &lt;/div&gt;
-&lt;/div&gt;</code></pre>
-
-<h2>Bulleted controls</h2>
-<p>Bulleted indicators for number of items and currently-selected item. Click to advance between items.</p>
-<div class="m-carousel m-center m-fluid m-carousel-example-5">
-  <div class="m-carousel-inner">
-    <div class="m-item">
-        <img src="{{ site.baseurl }}/static/examples/img/helmets.jpg">
-    </div>
-    <div class="m-item">
-        <img src="{{ site.baseurl }}/static/examples/img/blossoms.jpg">
-    </div>
-    <div class="m-item">
-        <img src="{{ site.baseurl }}/static/examples/img/glacier.jpg">
-    </div>
-    <div class="m-item">
-        <img src="{{ site.baseurl }}/static/examples/img/parliament.jpg">
-    </div>
-    <div class="m-item">
-        <img src="{{ site.baseurl }}/static/examples/img/pods.jpg">
-    </div>
-  </div>
-  <div class="m-carousel-controls m-carousel-bulleted">
-    <a class="carousel-control right" href="#" data-slide="1">1</a>
-    <a class="carousel-control right" href="#" data-slide="2">2</a>
-    <a class="carousel-control right" href="#" data-slide="3">3</a>
-    <a class="carousel-control right" href="#" data-slide="4">4</a>
-    <a class="carousel-control right" href="#" data-slide="5">5</a>
-  </div>
-</div>
-
-<h3>Code for this example:</h3>
-<pre><code>&lt;div class=&quot;m-carousel m-center m-fluid&quot;&gt;
-  &lt;div class=&quot;m-carousel-inner&quot;&gt;
-    &lt;div class=&quot;m-item&quot;&gt;
-      &lt;img src=&quot;image1.jpg&quot;&gt;
-    &lt;/div&gt;
-    &lt;div class=&quot;m-item&quot;&gt;
-      &lt;img src=&quot;image2.jpg&quot;&gt;
-    &lt;/div&gt;
-    &lt;div class=&quot;m-item&quot;&gt;
-      &lt;img src=&quot;image3.jpg&quot;&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div class=&quot;m-carousel-controls m-carousel-bulleted&quot;&gt;
-    &lt;a class=&quot;carousel-control right&quot; href=&quot;#&quot; data-slide=&quot;1&quot;&gt;1&lt;/a&gt;
-    &lt;a class=&quot;carousel-control right&quot; href=&quot;#&quot; data-slide=&quot;2&quot;&gt;2&lt;/a&gt;
-    &lt;a class=&quot;carousel-control right&quot; href=&quot;#&quot; data-slide=&quot;3&quot;&gt;3&lt;/a&gt;
-  &lt;/div&gt;
-&lt;/div&gt;</code></pre>
-
-
-
-<h2>Numbered pagination-style controls</h2>
-<p>Numbered pagination controls for each item, with flanking Previous / Next controls.</p>
-<div class="m-carousel m-carousel-example-6 m-center m-fluid">
-    <div class="m-carousel-inner">
-        <div class="m-item">
-            <img src="{{ site.baseurl }}/static/examples/img/parliament.jpg">
-        </div>
-        <div class="m-item">
-            <img src="{{ site.baseurl }}/static/examples/img/blossoms.jpg">
-        </div>
-        <div class="m-item">
-            <img src="{{ site.baseurl }}/static/examples/img/glacier.jpg">
-        </div>
-        <div class="m-item">
-            <img src="{{ site.baseurl }}/static/examples/img/helmets.jpg">
-        </div>
-        <div class="m-item">
-            <img src="{{ site.baseurl }}/static/examples/img/pods.jpg">
-        </div>
-    </div>
-    <div class="m-carousel-controls m-carousel-pagination">
-        <a class="carousel-control left" href="#" data-slide="prev">Previous</a>
-        <a class="carousel-control right" href="#" data-slide="1">1</a>
-        <a class="carousel-control right" href="#" data-slide="2">2</a>
-        <a class="carousel-control right" href="#" data-slide="3">3</a>
-        <a class="carousel-control right" href="#" data-slide="4">4</a>
-        <a class="carousel-control right" href="#" data-slide="5">5</a>
-        <a class="carousel-control right" href="#" data-slide="next">Next</a>
-    </div>
-</div>
-
-<h3>Code for this example:</h3>
-<pre><code>&lt;div class=&quot;m-carousel m-center m-fluid&quot;&gt;
-  &lt;div class=&quot;m-carousel-inner&quot;&gt;
-    &lt;div class=&quot;m-item&quot;&gt;
-      &lt;img src=&quot;image1.jpg&quot;&gt;
-    &lt;/div&gt;
-    &lt;div class=&quot;m-item&quot;&gt;
-      &lt;img src=&quot;image2.jpg&quot;&gt;
-    &lt;/div&gt;
-    &lt;div class=&quot;m-item&quot;&gt;
-      &lt;img src=&quot;image3.jpg&quot;&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div class=&quot;m-carousel-controls m-carousel-pagination&quot;&gt;
-    &lt;a class=&quot;carousel-control left&quot; href=&quot;#&quot; data-slide=&quot;prev&quot;&gt;Previous&lt;/a&gt;
-    &lt;a class=&quot;carousel-control right&quot; href=&quot;#&quot; data-slide=&quot;1&quot;&gt;1&lt;/a&gt;
-    &lt;a class=&quot;carousel-control right&quot; href=&quot;#&quot; data-slide=&quot;2&quot;&gt;2&lt;/a&gt;
-    &lt;a class=&quot;carousel-control right&quot; href=&quot;#&quot; data-slide=&quot;3&quot;&gt;3&lt;/a&gt;
-    &lt;a class=&quot;carousel-control right&quot; href=&quot;#&quot; data-slide=&quot;next&quot;&gt;Next&lt;/a&gt;  
-  &lt;/div&gt;
-&lt;/div&gt;</code></pre>
-
-
-<h2>HUD-style Controls</h2>
-<p>Previous and Next render as heads-up controls that display on hover events. Since hover events don't work on mobile, simply swipe to advance.</p>
-<div class="m-carousel m-center m-fluid m-carousel-example-7">
-    <div class="m-carousel-inner">
-        <div class="m-item">
-            <img src="{{ site.baseurl }}/static/examples/img/pods.jpg">
-        </div>
-        <div class="m-item">
-            <img src="{{ site.baseurl }}/static/examples/img/blossoms.jpg">
-        </div>
-        <div class="m-item">
-            <img src="{{ site.baseurl }}/static/examples/img/glacier.jpg">
-        </div>
-        <div class="m-item">
-            <img src="{{ site.baseurl }}/static/examples/img/helmets.jpg">
-        </div>
-        <div class="m-item">
-            <img src="{{ site.baseurl }}/static/examples/img/parliament.jpg">
-        </div>
-    </div>
-    <div class="m-carousel-controls m-carousel-hud">
-        <a class="m-carousel-control m-carousel-prev" href="#" data-slide="prev">Previous</a>
-        <a class="m-carousel-control m-carousel-next" href="#" data-slide="next">Next</a>
-    </div>
-</div>
-
-<h3>Code for this example:</h3>
-<pre><code>&lt;div class=&quot;m-carousel m-center m-fluid&quot;&gt;
-  &lt;div class=&quot;m-carousel-inner&quot;&gt;
-    &lt;div class=&quot;m-item&quot;&gt;
-      &lt;img src=&quot;image1&quot;&gt;
-    &lt;/div&gt;
-    &lt;div class=&quot;m-item&quot;&gt;
-      &lt;img src=&quot;image2&quot;&gt;
-    &lt;/div&gt;
-    &lt;div class=&quot;m-item&quot;&gt;
-      &lt;img src=&quot;image3&quot;&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div class=&quot;m-carousel-controls m-carousel-hud&quot;&gt;
-    &lt;a class=&quot;m-carousel-control m-carousel-prev&quot; href=&quot;#&quot; data-slide=&quot;prev&quot;&gt;Previous&lt;/a&gt;
-    &lt;a class=&quot;m-carousel-control m-carousel-next&quot; href=&quot;#&quot; data-slide=&quot;next&quot;&gt;Next&lt;/a&gt;
-  &lt;/div&gt;
-&lt;/div&gt;</code></pre>
+  &lt;/div&gt;</code></pre>
 
 <script src="{{ site.baseurl }}/static/examples/js/carousel.js"></script>
 <script>$('.m-carousel').carousel();</script>
\ No newline at end of file
diff --git a/www/modules/carousel.md b/www/modules/carousel.md
index 18e4d2d4..7a403cba 100644
--- a/www/modules/carousel.md
+++ b/www/modules/carousel.md
@@ -73,21 +73,21 @@ arbitrary content.
       <div class="m-carousel-inner">
         <!-- the items -->
         <div class="m-item m-active">
-          <img src="earth.jpg">
+          <img src="image1.jpg">
         </div>
         <div class="m-item">
-          <img src="wind.jpg">
+          <img src="image2.jpg">
         </div>
         <div class="m-item">
-          <img src="fire.jpg">
+          <img src="image3.jpg">
         </div>
       </div>
       <div>
         <!-- use the `data-slide` attribute to create controls -->
         <a href="#" data-slide="prev">Previous</a>
-        <a href="#" data-slide="1" class="m-active">earth</a>
-        <a href="#" data-slide="2">wind</a>
-        <a href="#" data-slide="3">fire</a>
+        <a href="#" data-slide="1" class="m-active">1</a>
+        <a href="#" data-slide="2">2</a>
+        <a href="#" data-slide="3">3</a>
         <a href="#" data-slide="next">Next</a>
       </div>
     </div>
diff --git a/www/static/examples/css/carousel-controls.css b/www/static/examples/css/carousel-controls.css
index 73847a36..6657b492 100644
--- a/www/static/examples/css/carousel-controls.css
+++ b/www/static/examples/css/carousel-controls.css
@@ -1,9 +1,12 @@
 /* 
   Carousel control base styling 
 */
+
 .m-carousel-controls {
   padding-top: 10px;
+  text-align: center;
 }
+
 .m-carousel-controls a {
     padding: 5px;
     -webkit-user-select: none;

From 203df6f8f9dda0bd9dd97c4d7d4c055f82bcb613 Mon Sep 17 00:00:00 2001
From: Ryan J Daw <ryan@mobify.me>
Date: Wed, 1 Aug 2012 11:10:23 -0700
Subject: [PATCH 3/3] Prevents Default action on slide buttons.

---
 modules/carousel/carousel-controls.css | 34 +++++++++
 modules/carousel/carousel.js           | 23 +++----
 www/static/examples/js/carousel.js     | 95 ++++++++++++--------------
 3 files changed, 89 insertions(+), 63 deletions(-)

diff --git a/modules/carousel/carousel-controls.css b/modules/carousel/carousel-controls.css
index 9f0f422e..6657b492 100644
--- a/modules/carousel/carousel-controls.css
+++ b/modules/carousel/carousel-controls.css
@@ -1,9 +1,12 @@
 /* 
   Carousel control base styling 
 */
+
 .m-carousel-controls {
   padding-top: 10px;
+  text-align: center;
 }
+
 .m-carousel-controls a {
     padding: 5px;
     -webkit-user-select: none;
@@ -159,4 +162,35 @@
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
+}
+
+
+
+/* scaled slides */
+.m-scaled .m-item {
+  opacity: 0.7;
+  -webkit-backface-visibility: hidden;
+  -webkit-transform: scale(0.75);
+  -moz-transform: scale(0.75);
+  -ms-transform: scale(0.75);
+  -o-transform: scale(0.75);
+  transform: scale(0.75);
+
+  /* Configure animations */
+  /* (0.5s would match the transition length between each, 
+      but fast swiping on a phone can result in odd timing. 
+      Half-length durations for each transform is a reasonable 
+      middle ground.) */
+  -webkit-transition: -webkit-transform cubic-bezier(0.33, 0.66, 0.66, 1) 0.25s, opacity ease-out 0.25s;
+  -moz-transition-timing-function: -moz-transform cubic-bezier(0.33, 0.66, 0.66, 1) 0.25s, opacity ease-out 0.25s;
+  -o-transition-timing-function: -o-transform cubic-bezier(0.33, 0.66, 0.66, 1) 0.25s, opacity ease-out 0.25s;
+  transition-timing-function: transform cubic-bezier(0.33, 0.66, 0.66, 1) 0.25s, opacity ease-out 0.25s;
+}
+.m-scaled .m-active {
+  opacity: 1;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  -o-transform: scale(1);
+  transform: scale(1);
 }
\ No newline at end of file
diff --git a/modules/carousel/carousel.js b/modules/carousel/carousel.js
index 20804281..4882e1b0 100644
--- a/modules/carousel/carousel.js
+++ b/modules/carousel/carousel.js
@@ -333,20 +333,17 @@ Mobify.UI.Carousel = (function($, Utils) {
             .on('click.carousel', click)
             .on('mouseout.carousel', end);
 
-        $element.find('[data-slide]').each(function(){
-            var $this = $(this);
+        $element.on('click', '[data-slide]', function(e){
+            e.preventDefault();
+            var action = $(this).attr('data-slide')
+              , index = parseInt(action, 10);
 
-            $this.click(function(){
-                var action = $this.attr('data-slide')
-                  , index = parseInt(action, 10);
-
-                if (isNaN(index)) {
-                    self[action]();
-                } else {
-                    self.move(index);
-                }
-            });
-        })
+            if (isNaN(index)) {
+                self[action]();
+            } else {
+                self.move(index);
+            }
+        });
 
         $element.on('afterSlide', function(e, previousSlide, nextSlide) {
             self.$items.eq(previousSlide - 1).removeClass(self._getClass('active'));
diff --git a/www/static/examples/js/carousel.js b/www/static/examples/js/carousel.js
index 07cf2ffc..4882e1b0 100644
--- a/www/static/examples/js/carousel.js
+++ b/www/static/examples/js/carousel.js
@@ -58,38 +58,39 @@ Mobify.UI.Utils = (function($) {
     };
 
     $.extend(has, {
-        'transform': !! (exports.getProperty("Transform"))
+        'transform': !! (exports.getProperty('Transform'))
       , 'transform3d': !! (window.WebKitCSSMatrix && 'm11' in new WebKitCSSMatrix()) 
     });
 
     // translateX(element, delta)
     // Moves the element by delta (px)
-    var transformProperty = exports.getProperty("Transform");
+    var transformProperty = exports.getProperty('Transform');
     if (has.transform3d) {
         exports.translateX = function(element, delta) {
-             if (typeof delta == "number") delta = delta + 'px';
-             element.style[transformProperty] = "translate3d(" + delta  + ",0,0)";
+             if (typeof delta == 'number') delta = delta + 'px';
+             element.style[transformProperty] = 'translate3d(' + delta  + ',0,0)';
         };
     } else if (has.transform) {
         exports.translateX = function(element, delta) {
-             if (typeof delta == "number") delta = delta + 'px';
-             element.style[transformProperty] = "translate(" + delta  + ",0)";
+             if (typeof delta == 'number') delta = delta + 'px';
+             element.style[transformProperty] = 'translate(' + delta  + ',0)';
         };
     } else {
         exports.translateX = function(element, delta) {
-            if (typeof delta == "number") delta = delta + 'px';
-            element.style['left'] = delta;
+            if (typeof delta == 'number') delta = delta + 'px';
+            element.style.left = delta;
         };
     }
 
     // setTransitions
-    var transitionProperty = exports.getProperty("Transition");
-    var durationProperty = exports.getProperty("TransitionDuration");
+    var transitionProperty = exports.getProperty('Transition')
+      , durationProperty = exports.getProperty('TransitionDuration');
+
     exports.setTransitions = function(element, enable) {
         if (enable) {
-            element.style[durationProperty] = "";
+            element.style[durationProperty] = '';
         } else {
-            element.style[durationProperty] = "0s";
+            element.style[durationProperty] = '0s';
         }
     }
 
@@ -119,22 +120,20 @@ Mobify.UI.Utils = (function($) {
 
 Mobify.UI.Carousel = (function($, Utils) {
     var defaults = {
-          dragRadius: 10
-        , moveRadius: 20
-        , classPrefix: undefined
-        , center: undefined
-        , classNames: {
-            outer: "carousel"
-          , inner: "carousel-inner"
-          , item: "item"
-          , center: "center"
-          , touch: "has-touch"
-          , dragging: "dragging"
-          , active: "active"
+            dragRadius: 10
+          , moveRadius: 20
+          , classPrefix: undefined
+          , classNames: {
+                outer: 'carousel'
+              , inner: 'carousel-inner'
+              , item: 'item'
+              , center: 'center'
+              , touch: 'has-touch'
+              , dragging: 'dragging'
+              , active: 'active'
+            }
         }
-    };
-
-    var has = $.support;
+       , has = $.support;
 
     // Constructor
     var Carousel = function(element, options) {
@@ -245,7 +244,7 @@ Mobify.UI.Carousel = (function($, Utils) {
         var abs = Math.abs
             , dragging = false
             , canceled = false
-            , dragRadius = this.options['dragRadius']
+            , dragRadius = this.options.dragRadius
             , xy
             , dx
             , dy
@@ -328,26 +327,23 @@ Mobify.UI.Carousel = (function($, Utils) {
         }
 
         $inner
-            .on(Utils.events.down + ".carousel", start)
-            .on(Utils.events.move + ".carousel", drag)
-            .on(Utils.events.up + ".carousel", end)
-            .on("click.carousel", click)
-            .on("mouseout.carousel", end);
-
-        $element.find('[data-slide]').each(function(){
-            var $this = $(this);
-
-            $this.click(function(){
-                var action = $this.attr('data-slide')
-                  , index = parseInt(action, 10);
-
-                if (isNaN(index)) {
-                    self[action]();
-                } else {
-                    self.move(index);
-                }
-            });
-        })
+            .on(Utils.events.down + '.carousel', start)
+            .on(Utils.events.move + '.carousel', drag)
+            .on(Utils.events.up + '.carousel', end)
+            .on('click.carousel', click)
+            .on('mouseout.carousel', end);
+
+        $element.on('click', '[data-slide]', function(e){
+            e.preventDefault();
+            var action = $(this).attr('data-slide')
+              , index = parseInt(action, 10);
+
+            if (isNaN(index)) {
+                self[action]();
+            } else {
+                self.move(index);
+            }
+        });
 
         $element.on('afterSlide', function(e, previousSlide, nextSlide) {
             self.$items.eq(previousSlide - 1).removeClass(self._getClass('active'));
@@ -479,7 +475,6 @@ Mobify.UI.Carousel = (function($, Utils) {
         return this;
     };
 
-    $.fn.carousel.defaults = {
-    };
+    $.fn.carousel.defaults = {};
 
 })(Mobify.$);