Check for data-interval on the first slide of carousel

js/src/carousel.js

@@ -181,6 +181,12 @@ class Carousel {
     }
 
     if (this._config && this._config.interval && !this._isPaused) {
+      this._activeElement = SelectorEngine.findOne(SELECTOR_ACTIVE_ITEM, this._element)
+
+      if (this._activeElement) {
+        this._updateInterval(this._activeElement)
+      }
+
       this._interval = setInterval(
         (document.visibilityState ? this.nextWhenVisible : this.next).bind(this),
         this._config.interval
@@ -409,6 +415,17 @@ class Carousel {
     }
   }
 
+  _updateInterval(element) {
+    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)
@@ -463,13 +480,7 @@ 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
-      }
+      this._updateInterval(nextElement)
 
       const transitionDuration = getTransitionDurationFromElement(activeElement)
 

js/tests/unit/carousel.spec.js

@@ -876,6 +876,29 @@ describe('Carousel', () => {
       expect(window.setInterval).toHaveBeenCalled()
       expect(window.clearInterval).toHaveBeenCalled()
     })
+
+    it('should get interval from data attribute in individual item', () => {
+      fixtureEl.innerHTML = [
+        '<div id="myCarousel" class="carousel slide">',
+        '  <div class="carousel-inner">',
+        '    <div class="carousel-item active" data-interval="7">item 1</div>',
+        '    <div class="carousel-item">item 2</div>',
+        '    <div class="carousel-item">item 3</div>',
+        '  </div>',
+        '</div>'
+      ].join('')
+
+      const carouselEl = fixtureEl.querySelector('#myCarousel')
+      const carousel = new Carousel(carouselEl, {
+        interval: 1814
+      })
+
+      expect(carousel._config.interval).toEqual(1814)
+
+      carousel.cycle()
+
+      expect(carousel._config.interval).toEqual(7)
+    })
   })
 
   describe('to', () => {