Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion js/src/carousel.js
Original file line number Diff line number Diff line change
Expand Up @@ -531,7 +531,7 @@ class Carousel {
throw new TypeError(`No method named "${action}"`)
}
data[action]()
} else if (_config.interval) {
} else if (_config.interval && _config.ride) {
data.pause()
data.cycle()
}
Expand Down
47 changes: 47 additions & 0 deletions js/tests/unit/carousel.js
Original file line number Diff line number Diff line change
Expand Up @@ -1270,4 +1270,51 @@ $(function () {
assert.strictEqual(spy.called, true)
sandbox.restore()
})

QUnit.test('should not cycle when there is no attribute data-ride', function (assert) {
assert.expect(1)

var spy = sinon.spy(Carousel.prototype, 'cycle')

var carouselHTML = '<div class="carousel"></div>'
var $carousel = $(carouselHTML)
$carousel.appendTo('#qunit-fixture')
$carousel.bootstrapCarousel()

assert.strictEqual(spy.called, false)
spy.restore()
})

QUnit.test('should cycle when there is data-ride attribute', function (assert) {
assert.expect(1)

var spy = sinon.spy(Carousel.prototype, 'cycle')

var carouselHTML = '<div class="carousel" data-ride="carousel"></div>'
var $carousel = $(carouselHTML)
$carousel.appendTo('#qunit-fixture')
$carousel.bootstrapCarousel()

assert.strictEqual(spy.called, true)
spy.restore()
})

QUnit.test('should init carousels with data-ride on load event', function (assert) {
assert.expect(1)

var done = assert.async()
var spy = sinon.spy(Carousel, '_jQueryInterface')

var carouselHTML = '<div class="carousel" data-ride="carousel"></div>'
var $carousel = $(carouselHTML)
$carousel.appendTo('#qunit-fixture')

$(window).trigger($.Event('load'))

setTimeout(function () {
assert.strictEqual(spy.called, true)
spy.restore()
done()
}, 5)
})
})
2 changes: 1 addition & 1 deletion site/docs/4.2/components/carousel.md
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@ Add `data-interval=""` to a `.carousel-item` to change the amount of time to del

Use data attributes to easily control the position of the carousel. `data-slide` accepts the keywords `prev` or `next`, which alters the slide position relative to its current position. Alternatively, use `data-slide-to` to pass a raw slide index to the carousel `data-slide-to="2"`, which shifts the slide position to a particular index beginning with `0`.

The `data-ride="carousel"` attribute is used to mark a carousel as animating starting at page load. **It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.**
The `data-ride="carousel"` attribute is used to mark a carousel as animating starting at page load. If you don't use `data-ride="carousel"` to initialize your carousel, you have to initialize it yourself. **It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.**

### Via JavaScript

Expand Down