diff --git a/docs/javascript.html b/docs/javascript.html index 4d90dbcf1e..1cba7766f9 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -724,7 +724,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
$(".alert-message").alert('close')

Events

Bootstrap's alert class exposes a few events for hooking into alert functionality.

- +
@@ -1021,29 +1021,32 @@ $('#myCollapsible').on('hidden', function () {

Using bootstrap-carousel.js

$('.carousel').carousel()
-

Markup

+

Options

+
Event
+ + + + + + + + + + + + + + + + +
Nametypedefaultdescription
intervalnumber5000The amount of type to delay between automatically cycling an item.
+

Markup

Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.

 <div class="thumbnail carousel">
 
   <!-- items -->
-  <div class="carousel-inner">
-    <div class="item active">
-      <img src="http://placehold.it/1100x350">
-      <div class="caption">
-        <h5>Thumbnail label</h5>
-        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. </p>
-      </div>
-    </div>
-
-    <div class="item">
-      <img src="http://placehold.it/1100x350">
-      <div class="caption">
-        <h5>Thumbnail label</h5>
-        <p>Donec id elit non mi porta gravida at eget metus.</p>
-      </div>
-    </div>
-  </div>
+  <div class="carousel-inner">…</div>
 
   <!-- navigation -->
   <a class="nav" href="#myCarousel" data-slide="next">&lt;</a>
@@ -1051,6 +1054,21 @@ $('#myCollapsible').on('hidden', function () {
 
 </div>
 
+

Methods

+

.carousel(options)

+

Initializes the carousel with an optional options object and starts cycling through items.

+
+$('.myCarousel').carousel({
+  interval: 2000
+})
+

.carousel('cycle')

+

Cycles through the carousel items from left to right.

+

.carousel('pause')

+

Stops the carousel from cycling through items.

+

.carousel('prev')

+

Cycles to the previous item.

+

.carousel('next')

+

Cycles to the next item.

Demo

@@ -1143,6 +1161,9 @@ $('#myCollapsible').on('hidden', function () { btn.button('reset') }, 3000) }) + + // carousel demo + $('#myCarousel').carousel() }) diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js index 2099b372cb..5e37b0f60e 100644 --- a/js/bootstrap-carousel.js +++ b/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) }) })