add ability to cycle carousel to a particular frame

2 files changed, 29 insertions, 5 deletions

diff --git a/docs/javascript.html b/docs/javascript.html
index 1b8af662a..7f589de4c 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -1323,6 +1323,8 @@ $('.myCarousel').carousel({
           <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(number)</h4>
+          <p>Cycles the carousel to a particular frame (0 based, similar to an array).</p>
           <h4>.carousel('prev')</h4>
           <p>Cycles to the previous item.</p>
           <h4>.carousel('next')</h4>
diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js
index f2d5110a4..4e12e31b5 100644
--- a/js/bootstrap-carousel.js
+++ b/js/bootstrap-carousel.js
@@ -38,6 +38,27 @@
       return this
     }
 
+  , to: function (pos) {
+      var $active = this.$element.find('.active')
+        , children = $active.parent().children()
+        , activePos = children.index($active)
+        , that = this
+
+      if (pos > (children.length - 1) || pos < 0) return
+
+      if (this.sliding) {
+        return this.$element.one('slid', function () {
+          that.to(pos)
+        })
+      }
+
+      if (activePos == pos) {
+        return this.pause().cycle()
+      }
+
+      return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos]))
+    }
+
   , pause: function () {
       clearInterval(this.interval)
       return this
@@ -53,9 +74,9 @@
       return this.slide('prev')
     }
 
-  , slide: function (type) {
+  , slide: function (type, next) {
       var $active = this.$element.find('.active')
-        , $next = $active[type]()
+        , $next = next || $active[type]()
         , isCycling = this.interval
         , direction = type == 'next' ? 'left' : 'right'
         , fallback  = type == 'next' ? 'first' : 'last'
@@ -71,8 +92,8 @@
         this.$element.trigger('slide')
         $active.removeClass('active')
         $next.addClass('active')
-        this.$element.trigger('slid')
         this.sliding = false
+        this.$element.trigger('slid')
       } else {
         $next.addClass(type)
         $next[0].offsetWidth // force reflow
@@ -82,8 +103,8 @@
         this.$element.one($.support.transition.end, function () {
           $next.removeClass([type, direction].join(' ')).addClass('active')
           $active.removeClass(['active', direction].join(' '))
-          that.$element.trigger('slid')
           that.sliding = false
+          setTimeout(function () { that.$element.trigger('slid') }, 0)
         })
       }
 
@@ -104,7 +125,8 @@
         , data = $this.data('carousel')
         , options = typeof option == 'object' && option
       if (!data) $this.data('carousel', (data = new Carousel(this, options)))
-      if (typeof option == 'string' || (option = options.slide)) data[option]()
+      if (typeof option == 'number') data.to(option)
+      else if (typeof option == 'string' || (option = options.slide)) data[option]()
       else data.cycle()
     })
   }