From 89a73f100e7a3c765314e5cff0eeaf9c051f2944 Mon Sep 17 00:00:00 2001
From: Johann-S <johann.servoire@gmail.com>
Date: Fri, 4 Jan 2019 17:15:01 +0100
Subject: [PATCH] carousel should not cycle when there is no data-ride on init
 (#27968)

---
 js/src/carousel.js                   |  2 +-
 js/tests/unit/carousel.js            | 47 ++++++++++++++++++++++++++++
 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 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)
+  })
 })
diff --git a/site/docs/4.2/components/carousel.md b/site/docs/4.2/components/carousel.md
index a0ff8c34f9..26c81b48d6 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