basic carousel implementation

5 files changed, 158 insertions, 53 deletions

diff --git a/bootstrap.css b/bootstrap.css
index ae1754aa6..b4fd7e748 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Mon Jan  2 19:12:52 PST 2012
+ * Date: Mon Jan  2 22:30:09 PST 2012
  */
 html, body {
   margin: 0;
@@ -2587,13 +2587,48 @@ a.thumbnail:hover {
 .carousel {
   position: relative;
 }
+.carousel .carousel-inner {
+  overflow: hidden;
+  width: 100%;
+  position: relative;
+}
 .carousel .item {
   display: none;
+  position: relative;
+  -webkit-transition: 0.25s linear left;
+  -moz-transition: 0.25s linear left;
+  -ms-transition: 0.25s linear left;
+  -o-transition: 0.25s linear left;
+  transition: 0.25s linear left;
 }
-.carousel .active {
+.carousel .active, .carousel .next, .carousel .prev {
   display: block;
 }
+.carousel .next, .carousel .prev {
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.carousel .next {
+  left: 100%;
+}
+.carousel .prev {
+  left: -100%;
+}
+.carousel .next.left, .carousel .prev.right {
+  left: 0%;
+}
+.carousel .active.left {
+  left: -100%;
+}
+.carousel .active.right {
+  left: 100%;
+}
 .carousel .nav {
+  width: auto;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
   height: 50px;
   position: absolute;
   top: 50%;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 227250226..49e968683 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -342,9 +342,16 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
 a.thumbnail:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);}
 .thumbnail>img{display:block;max-width:100%;}
 .thumbnail .caption{padding:9px;}
-.carousel{position:relative;}.carousel .item{display:none;}
-.carousel .active{display:block;}
-.carousel .nav{height:50px;position:absolute;top:50%;margin:-25px 0 0;cursor:pointer;background:rgba(0, 0, 0, 0.7);color:white;font-size:42px;left:5px;font-weight:100;padding:0 15px;}.carousel .nav.right{right:5px;left:auto;}
+.carousel{position:relative;}.carousel .carousel-inner{overflow:hidden;width:100%;position:relative;}
+.carousel .item{display:none;position:relative;-webkit-transition:0.25s linear left;-moz-transition:0.25s linear left;-ms-transition:0.25s linear left;-o-transition:0.25s linear left;transition:0.25s linear left;}
+.carousel .active,.carousel .next,.carousel .prev{display:block;}
+.carousel .next,.carousel .prev{position:absolute;top:0;width:100%;}
+.carousel .next{left:100%;}
+.carousel .prev{left:-100%;}
+.carousel .next.left,.carousel .prev.right{left:0%;}
+.carousel .active.left{left:-100%;}
+.carousel .active.right{left:100%;}
+.carousel .nav{width:auto;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;height:50px;position:absolute;top:50%;margin:-25px 0 0;cursor:pointer;background:rgba(0, 0, 0, 0.7);color:white;font-size:42px;left:5px;font-weight:100;padding:0 15px;}.carousel .nav.right{right:5px;left:auto;}
 .carousel .nav:hover{text-decoration:none;background:rgba(0, 0, 0, 0.8);}
 .hidden{display:none;visibility:hidden;}
 @media (max-width: 480px){.modal{width:auto;margin:0;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
diff --git a/docs/javascript.html b/docs/javascript.html
index ae464e849..4d90dbcf1 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -1026,62 +1026,66 @@ $('#myCollapsible').on('hidden', function () {
 <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 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&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 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">
+          <div id="myCarousel" class="thumbnail carousel slide">
 
-           <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="">
-              <div class="caption">
-                <h5>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 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>
 
-            <div class="item">
-              <img src="http://placehold.it/1100x350" alt="">
-              <div class="caption">
-                <h5>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 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>
 
-            <div class="item">
-              <img src="http://placehold.it/1100x350" alt="">
-              <div class="caption">
-                <h5>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 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>
@@ -1139,9 +1143,6 @@ $('#myCollapsible').on('hidden', function () {
               btn.button('reset')
             }, 3000)
           })
-
-        // carousel demo
-        $('.carousel').carousel()
       })
     </script>
   </body>
diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js
index 2e1fde11a..2099b372c 100644
--- a/js/bootstrap-carousel.js
+++ b/js/bootstrap-carousel.js
@@ -27,25 +27,48 @@
 
   var Carousel = function (element) {
     this.$element = $(element)
-    this.cycle()
   }
 
   Carousel.prototype = {
 
     cycle: function () {
-      this.interval = setInterval($.proxy(this.right, this), 500)
+      this.interval = setInterval($.proxy(this.next, this), 5000)
     }
 
   , pause: function () {
       clearInterval(this.interval)
     }
 
-  , right: function () {
-
+  , next: function () {
+      this.slide('next')
     }
 
-  , left: function () {
+  , prev: function () {
+      this.slide('prev')
+    }
 
+  , slide: function (type) {
+      var $active = this.$element.find('.active')
+        , $next = $active[type]()
+        , direction = type == 'next' ? 'left' : 'right'
+        , fallback  = type == 'next' ? 'first' : 'last'
+        , that = this
+
+      $next = $next.length ? $next : this.$element.find('.item')[fallback]()
+
+      if (!$.support.transition && this.$element.hasClass('slide')) {
+        $active.removeClass('active')
+        $next.addClass('active')
+      } else {
+        $next.addClass(type)
+        $next[0].offsetWidth // force reflow
+        $active.addClass(direction)
+        $next.addClass(direction)
+        this.$element.one($.support.transition.end, function () {
+          $next.removeClass([type, direction].join(' ')).addClass('active')
+          $active.removeClass(['active', direction].join(' '))
+        })
+      }
     }
 
   }
@@ -59,10 +82,23 @@
       var $this = $(this)
         , data = $this.data('carousel')
       if (!data) $this.data('carousel', (data = new Carousel(this)))
-      if (typeof option == 'string') data[option].call($this)
+      if (typeof option == 'string') data[option]()
     })
   }
 
   $.fn.carousel.Constructor = Carousel
 
+
+ /* CAROUSEL DATA-API
+  * ================= */
+
+  $(function () {
+    $('body').on('click.carousel.data-api', '[data-slide]', function ( e ) {
+      var $this = $(this)
+        , $target = $($this.attr('data-target') || $this.attr('href'))
+
+      $target.carousel($this.attr('data-slide'))
+    })
+  })
+
 }( window.jQuery )
\ No newline at end of file
diff --git a/lib/thumbnails.less b/lib/thumbnails.less
index 181cca681..114d0f0c8 100644
--- a/lib/thumbnails.less
+++ b/lib/thumbnails.less
@@ -33,14 +33,40 @@ a.thumbnail:hover {
   padding: 9px;
 }
 
-// carousel
 .carousel {
+
   position: relative;
 
-  .item { display: none; }
-  .active { display: block; }
+  .carousel-inner {
+    overflow: hidden;
+    width: 100%;
+    position: relative;
+  }
+
+  .item {
+    display: none;
+    position: relative;
+    .transition(.25s linear left);
+  }
+
+  .active, .next, .prev { display: block; }
+
+  .next, .prev {
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  .next { left: 100%; }
+  .prev { left: -100%; }
+  .next.left, .prev.right { left: 0% }
+
+  .active.left { left: -100% }
+  .active.right { left: 100% }
 
   .nav {
+    width: auto;
+    .border-radius(0);
     height: 50px;
     position: absolute;
     top: 50%;