From 3a5f9f5cf004ff02eca0b1680b461b79dd61d980 Mon Sep 17 00:00:00 2001 From: Mitchell Bryson Date: Sun, 1 Nov 2020 12:36:50 +0000 Subject: 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 --- js/src/carousel.js | 28 ++++++++++++++++++++-------- 1 file changed, 20 insertions(+), 8 deletions(-) (limited to 'js/src') diff --git a/js/src/carousel.js b/js/src/carousel.js index bd5f3d204..ed8e2b89a 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, () => { -- cgit v1.2.3