Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

carousel should not cycle when there is no data-ride on init #27968

Merged
merged 3 commits into from
Jan 4, 2019
Merged
Show file tree
Hide file tree
Changes from 2 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