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

diff --git a/js/src/carousel.js b/js/src/carousel.js
index 21ec57a2e31b8f55e85928f0ff4b6b23e592f7c8..a43d86b18974f47b19d834e1651b6fa089df5130 100644 (file)
--- 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 d6fea2f34ee1ced731feaa320f9e76360bed6967..6c28b672145e402339c75e3731f7a4d1a0f2c54c 100644 (file)
--- 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 a0ff8c34f98da62e5f2182a574c16a1392a8699e..26c81b48d6df36c413ec087bd0823d5981729b36 100644 (file)
--- 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