basic carousel implementation

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 )