rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Merge pull request #14069 from twbs/fix-13818

Browse Source 
Use more robust "find next carousel item" logic
This commit is contained in:
Chris Rebert 2014-07-31 11:36:56 -07:00
commit f026cfb831
2 changed files with 35 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
js/carousel.js
View File

@ -63,6 +63,13 @@
return this.$items.index(item || this.$active) return this.$items.index(item || this.$active)
} }
Carousel.prototype.getItemForDirection = function (direction, active) {
var delta = direction == 'prev' ? -1 : 1
var activeIndex = this.getItemIndex(active)
var itemIndex = (activeIndex + delta) % this.$items.length
return this.$items.eq(itemIndex)
}
Carousel.prototype.to = function (pos) { Carousel.prototype.to = function (pos) {
var that = this var that = this
var activeIndex = this.getItemIndex(this.$active = this.$element.find('.item.active')) var activeIndex = this.getItemIndex(this.$active = this.$element.find('.item.active'))
@ -72,7 +79,7 @@
if (this.sliding) return this.$element.one('slid.bs.carousel', function () { that.to(pos) }) // yes, "slid" if (this.sliding) return this.$element.one('slid.bs.carousel', function () { that.to(pos) }) // yes, "slid"
if (activeIndex == pos) return this.pause().cycle() if (activeIndex == pos) return this.pause().cycle()
return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos])) return this.slide(pos > activeIndex ? 'next' : 'prev', this.$items.eq(pos))
} }
Carousel.prototype.pause = function (e) { Carousel.prototype.pause = function (e) {
@ -100,7 +107,7 @@
Carousel.prototype.slide = function (type, next) { Carousel.prototype.slide = function (type, next) {
var $active = this.$element.find('.item.active') var $active = this.$element.find('.item.active')
var $next = next || $active[type]() var $next = next || this.getItemForDirection(type, $active)
var isCycling = this.interval var isCycling = this.interval
var direction = type == 'next' ? 'left' : 'right' var direction = type == 'next' ? 'left' : 'right'
var fallback = type == 'next' ? 'first' : 'last' var fallback = type == 'next' ? 'first' : 'last'

27
js/tests/unit/carousel.js
View File

@ -349,7 +349,7 @@ $(function () {
$carousel.remove() $carousel.remove()
}) })
test('should skip over non-items', function () { test('should skip over non-items when using item indices', function () {
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">' var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">'
+ '<div class="carousel-inner">' + '<div class="carousel-inner">'
+ '<div class="item active">' + '<div class="item active">'
@ -373,4 +373,29 @@ $(function () {
strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active') strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active')
}) })
test('should skip over non-items when using next/prev methods', function () {
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">'
+ '<div class="carousel-inner">'
+ '<div class="item active">'
+ '<img alt="">'
+ '</div>'
+ '<script type="text/x-metamorph" id="thingy"/>'
+ '<div class="item">'
+ '<img alt="">'
+ '</div>'
+ '<div class="item">'
+ '</div>'
+ '</div>'
+ '</div>'
var $template = $(templateHTML)
$template.bootstrapCarousel()
strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
$template.bootstrapCarousel('next')
strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active')
})
}) })