clean up options implementation for carousel

docs/javascript.html

@@ -724,7 +724,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           <pre class="prettyprint linenums">$(".alert-message").alert('close')</pre>
           <h3>Events</h3>
           <p>Bootstrap's alert class exposes a few events for hooking into alert functionality. </p>
-          <table class="zebra-striped">
+          <table class="bordered-table striped-table">
             <thead>
              <tr>
                <th style="width: 150px;">Event</th>
@@ -1021,29 +1021,32 @@ $('#myCollapsible').on('hidden', function () {
         <div class="span9 columns">
           <h3>Using bootstrap-carousel.js</h3>
           <pre class="prettyprint linenums">$('.carousel').carousel()</pre>
-            <h3>Markup</h3>
+          <h3>Options</h3>
+          <table class="bordered-table striped-table">
+            <thead>
+             <tr>
+               <th style="width: 100px;">Name</th>
+               <th style="width: 50px;">type</th>
+               <th style="width: 50px;">default</th>
+               <th>description</th>
+             </tr>
+            </thead>
+            <tbody>
+             <tr>
+               <td>interval</td>
+               <td>number</td>
+               <td>5000</td>
+               <td>The amount of type to delay between automatically cycling an item.</td>
+             </tr>
+            </tbody>
+          </table>
+          <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;div class="carousel-inner"&gt;…&lt;/div&gt;
 
   &lt;!-- navigation --&gt;
   &lt;a class="nav" href="#myCarousel" data-slide="next"&gt;&amp;lt;&lt;/a&gt;
@@ -1051,6 +1054,21 @@ $('#myCollapsible').on('hidden', function () {
 
 &lt;/div&gt;
 </pre>
+<h3>Methods</h3>
+<h4>.carousel(options)</h4>
+<p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p>
+<pre class="prettyprint linenums">
+$('.myCarousel').carousel({
+  interval: 2000
+})</pre>
+<h4>.carousel('cycle')</h4>
+<p>Cycles through the carousel items from left to right.</p>
+<h4>.carousel('pause')</h4>
+<p>Stops the carousel from cycling through items.</p>
+<h4>.carousel('prev')</h4>
+<p>Cycles to the previous item.</p>
+<h4>.carousel('next')</h4>
+<p>Cycles to the next item.</p>
           <h3>Demo</h3>
 
           <!-- carousel -->
@@ -1143,6 +1161,9 @@ $('#myCollapsible').on('hidden', function () {
               btn.button('reset')
             }, 3000)
           })
+
+        // carousel demo
+        $('#myCarousel').carousel()
       })
     </script>
   </body>

js/bootstrap-carousel.js

@@ -25,35 +25,42 @@
  /* CAROUSEL CLASS DEFINITION
   * ========================= */
 
-  var Carousel = function (element) {
+  var Carousel = function (element, options) {
     this.$element = $(element)
+    this.options = $.extend({}, $.fn.carousel.defaults, options)
+    this.options.slide && this.slide(this.options.slide)
   }
 
   Carousel.prototype = {
 
     cycle: function () {
       this.interval = setInterval($.proxy(this.next, this), 5000)
+      return this
     }
 
   , pause: function () {
       clearInterval(this.interval)
+      return this
     }
 
   , next: function () {
-      this.slide('next')
+      return this.slide('next')
     }
 
   , prev: function () {
-      this.slide('prev')
+      return this.slide('prev')
     }
 
   , slide: function (type) {
       var $active = this.$element.find('.active')
         , $next = $active[type]()
+        , isCycling = this.interval
         , direction = type == 'next' ? 'left' : 'right'
         , fallback  = type == 'next' ? 'first' : 'last'
         , that = this
 
+      isCycling && this.pause()
+
       $next = $next.length ? $next : this.$element.find('.item')[fallback]()
 
       if (!$.support.transition && this.$element.hasClass('slide')) {
@@ -69,6 +76,10 @@
           $active.removeClass(['active', direction].join(' '))
         })
       }
+
+      isCycling && this.cycle()
+
+      return this
     }
 
   }
@@ -81,11 +92,17 @@
     return this.each(function () {
       var $this = $(this)
         , data = $this.data('carousel')
-      if (!data) $this.data('carousel', (data = new Carousel(this)))
-      if (typeof option == 'string') data[option]()
+        , options = typeof option == 'object' && option
+      if (!data) $this.data('carousel', (data = new Carousel(this, options)))
+      if (typeof option == 'string' || (option = options.slide)) data[option]()
+      else data.cycle()
     })
   }
 
+  $.fn.carousel.defaults = {
+      interval: 5000
+  }
+
   $.fn.carousel.Constructor = Carousel
 
 
@@ -96,8 +113,8 @@
     $('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'))
+        , options = !$target.data('modal') && $.extend({}, $target.data(), $this.data())
+      $target.carousel(options)
     })
   })