rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-17 14:54:30 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source 
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>
This commit is contained in:
Mitchell Bryson 2020-11-12 07:34:17 +00:00 committed by GitHub
parent 9e9e1e61d5
commit 896e444895
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 35 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.bundlewatch.config.json
View File

@ -26,7 +26,7 @@
},
{
"path": "./dist/js/bootstrap.bundle.js",
"maxSize": "47.5 kB"
"maxSize": "48 kB"
},
{
"path": "./dist/js/bootstrap.bundle.min.js",

28
js/src/carousel.js
View File

@ -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)

15
js/tests/unit/carousel.js
View File

@ -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">' +
@ -516,13 +516,26 @@ $(function () {
'</div>'
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()
})