rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00
Code Issues Actions Packages Releases Activity

add ability to cycle carousel to a particular frame

Browse Source
This commit is contained in:
Jacob Thornton 2012-01-21 23:02:29 -08:00
parent 6e490628d1
commit 373a54187e
2 changed files with 29 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/javascript.html
View File

@ -1323,6 +1323,8 @@ $('.myCarousel').carousel({
<p>Cycles through the carousel items from left to right.</p> <p>Cycles through the carousel items from left to right.</p>
<h4>.carousel('pause')</h4> <h4>.carousel('pause')</h4>
<p>Stops the carousel from cycling through items.</p> <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> <h4>.carousel('prev')</h4>
<p>Cycles to the previous item.</p> <p>Cycles to the previous item.</p>
<h4>.carousel('next')</h4> <h4>.carousel('next')</h4>

32
js/bootstrap-carousel.js vendored
View File

@ -38,6 +38,27 @@
return this 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 () { , pause: function () {
clearInterval(this.interval) clearInterval(this.interval)
return this return this
@ -53,9 +74,9 @@
return this.slide('prev') return this.slide('prev')
} }
, slide: function (type) { , slide: function (type, next) {
var $active = this.$element.find('.active') var $active = this.$element.find('.active')
, $next = $active[type]() , $next = next || $active[type]()
, isCycling = this.interval , isCycling = this.interval
, direction = type == 'next' ? 'left' : 'right' , direction = type == 'next' ? 'left' : 'right'
, fallback = type == 'next' ? 'first' : 'last' , fallback = type == 'next' ? 'first' : 'last'
@ -71,8 +92,8 @@
this.$element.trigger('slide') this.$element.trigger('slide')
$active.removeClass('active') $active.removeClass('active')
$next.addClass('active') $next.addClass('active')
this.$element.trigger('slid')
this.sliding = false this.sliding = false
this.$element.trigger('slid')
} else { } else {
$next.addClass(type) $next.addClass(type)
$next[0].offsetWidth // force reflow $next[0].offsetWidth // force reflow
@ -82,8 +103,8 @@
this.$element.one($.support.transition.end, function () { this.$element.one($.support.transition.end, function () {
$next.removeClass([type, direction].join(' ')).addClass('active') $next.removeClass([type, direction].join(' ')).addClass('active')
$active.removeClass(['active', direction].join(' ')) $active.removeClass(['active', direction].join(' '))
that.$element.trigger('slid')
that.sliding = false that.sliding = false
setTimeout(function () { that.$element.trigger('slid') }, 0)
}) })
} }
@ -104,7 +125,8 @@
, data = $this.data('carousel') , data = $this.data('carousel')
, options = typeof option == 'object' && option , options = typeof option == 'object' && option
if (!data) $this.data('carousel', (data = new Carousel(this, options))) 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() else data.cycle()
}) })
} }