diff options
| -rw-r--r-- | docs/javascript.html | 59 | ||||
| -rw-r--r-- | js/bootstrap-carousel.js | 31 |
2 files changed, 64 insertions, 26 deletions
diff --git a/docs/javascript.html b/docs/javascript.html index 4d90dbcf1..1cba7766f 100644 --- a/docs/javascript.html +++ b/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"> <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> </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> diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js index 2099b372c..5e37b0f60 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) }) }) |