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

2 files changed, 48 insertions, 1 deletions

diff --git a/js/src/carousel.js b/js/src/carousel.js
index 21ec57a2e3..a43d86b189 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 d6fea2f34e..6c28b67214 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)
+  })
 })