Check for data-interval on the first slide of carousel - v4 (#31820)

When starting a cycle for a carousel, it only checks for a default interval, and not an interval defined on the slide element via data props. This adds a check in before creating the interval to move to the next slide.

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

3 files changed, 35 insertions, 10 deletions

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index fb76d8dd83..1b44447287 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -26,7 +26,7 @@
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",
-      "maxSize": "47.5 kB"
+      "maxSize": "48 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.min.js",
diff --git a/js/src/carousel.js b/js/src/carousel.js
index 5f738fd927..cc6ae44079 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -169,6 +169,8 @@ class Carousel {
     }
 
     if (this._config.interval && !this._isPaused) {
+      this._updateInterval()
+
       this._interval = setInterval(
         (document.visibilityState ? this.nextWhenVisible : this.next).bind(this),
         this._config.interval
@@ -401,6 +403,23 @@ class Carousel {
     }
   }
 
+  _updateInterval() {
+    const element = this._activeElement || this._element.querySelector(SELECTOR_ACTIVE_ITEM)
+
+    if (!element) {
+      return
+    }
+
+    const elementInterval = parseInt(element.getAttribute('data-interval'), 10)
+
+    if (elementInterval) {
+      this._config.defaultInterval = this._config.defaultInterval || this._config.interval
+      this._config.interval = elementInterval
+    } else {
+      this._config.interval = this._config.defaultInterval || this._config.interval
+    }
+  }
+
   _slide(direction, element) {
     const activeElement = this._element.querySelector(SELECTOR_ACTIVE_ITEM)
     const activeElementIndex = this._getItemIndex(activeElement)
@@ -445,6 +464,7 @@ class Carousel {
     }
 
     this._setActiveIndicatorElement(nextElement)
+    this._activeElement = nextElement
 
     const slidEvent = $.Event(EVENT_SLID, {
       relatedTarget: nextElement,
@@ -461,14 +481,6 @@ class Carousel {
       $(activeElement).addClass(directionalClassName)
       $(nextElement).addClass(directionalClassName)
 
-      const nextElementInterval = parseInt(nextElement.getAttribute('data-interval'), 10)
-      if (nextElementInterval) {
-        this._config.defaultInterval = this._config.defaultInterval || this._config.interval
-        this._config.interval = nextElementInterval
-      } else {
-        this._config.interval = this._config.defaultInterval || this._config.interval
-      }
-
       const transitionDuration = Util.getTransitionDurationFromElement(activeElement)
 
       $(activeElement)
diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js
index 757461575b..3c3e203e53 100644
--- a/js/tests/unit/carousel.js
+++ b/js/tests/unit/carousel.js
@@ -480,7 +480,7 @@ $(function () {
   })
 
   QUnit.test('should set interval from data attribute on individual carousel-item', function (assert) {
-    assert.expect(2)
+    assert.expect(4)
     var templateHTML = '<div id="myCarousel" class="carousel slide" data-interval="1814">' +
         '<div class="carousel-inner">' +
         '<div class="carousel-item active" data-interval="2814">' +
@@ -517,12 +517,25 @@ $(function () {
     var $carousel = $(templateHTML)
 
     $carousel.appendTo('body')
+    $carousel.bootstrapCarousel()
+    assert.strictEqual($carousel.data('bs.carousel')._config.interval, 1814)
+    $carousel.remove()
+
+    $carousel.appendTo('body')
+    $carousel.bootstrapCarousel(0)
+    $carousel.data('bs.carousel').cycle()
+    assert.strictEqual($carousel.data('bs.carousel')._config.interval, 2814)
+    $carousel.remove()
+
+    $carousel.appendTo('body')
     $carousel.bootstrapCarousel(1)
+    $carousel.data('bs.carousel').cycle()
     assert.strictEqual($carousel.data('bs.carousel')._config.interval, 3814)
     $carousel.remove()
 
     $carousel.appendTo('body')
     $carousel.bootstrapCarousel(2)
+    $carousel.data('bs.carousel').cycle()
     assert.strictEqual($carousel.data('bs.carousel')._config.interval, 1814, 'reverts to default interval if no data-interval is set')
     $carousel.remove()
   })