diff options
| -rw-r--r-- | js/src/carousel.js | 2 | ||||
| -rw-r--r-- | js/tests/unit/carousel.js | 47 | ||||
| -rw-r--r-- | site/docs/4.2/components/carousel.md | 2 |
3 files changed, 49 insertions, 2 deletions
diff --git a/js/src/carousel.js b/js/src/carousel.js index 21ec57a2e..a43d86b18 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -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() } diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js index d6fea2f34..6c28b6721 100644 --- a/js/tests/unit/carousel.js +++ b/js/tests/unit/carousel.js @@ -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) + }) }) diff --git a/site/docs/4.2/components/carousel.md b/site/docs/4.2/components/carousel.md index a0ff8c34f..26c81b48d 100644 --- a/site/docs/4.2/components/carousel.md +++ b/site/docs/4.2/components/carousel.md @@ -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 |