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

* check for data-interval on the first slide of carousel

* add updateInterval method for elements of a carousel

* add test for carousel interval being set during cycle

* update activeElement as soon as slide has finished (before transition end)

* only updateInterval before using it

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

1 files changed, 20 insertions, 8 deletions

diff --git a/js/src/carousel.js b/js/src/carousel.js
index bd5f3d2040..ed8e2b89a6 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -181,6 +181,8 @@ class Carousel {
     }
 
     if (this._config && this._config.interval && !this._isPaused) {
+      this._updateInterval()
+
       this._interval = setInterval(
         (document.visibilityState ? this.nextWhenVisible : this.next).bind(this),
         this._config.interval
@@ -409,6 +411,23 @@ class Carousel {
     }
   }
 
+  _updateInterval() {
+    const element = this._activeElement || SelectorEngine.findOne(SELECTOR_ACTIVE_ITEM, this._element)
+
+    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 = SelectorEngine.findOne(SELECTOR_ACTIVE_ITEM, this._element)
     const activeElementIndex = this._getItemIndex(activeElement)
@@ -454,6 +473,7 @@ class Carousel {
     }
 
     this._setActiveIndicatorElement(nextElement)
+    this._activeElement = nextElement
 
     if (this._element.classList.contains(CLASS_NAME_SLIDE)) {
       nextElement.classList.add(orderClassName)
@@ -463,14 +483,6 @@ class Carousel {
       activeElement.classList.add(directionalClassName)
       nextElement.classList.add(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 = getTransitionDurationFromElement(activeElement)
 
       EventHandler.one(activeElement, TRANSITION_END, () => {