mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-20 20:31:26 +02:00
Code Issues Releases Wiki Activity

feature(carousel): carousel-item interval (#26667)

Browse Source 
adds the ability to assign data-interval to an individual carousel-item
This commit is contained in:
Christopher Morrissey
2018-09-18 08:55:48 -04:00
committed by XhmikosR
parent e604958641
commit ea0faadde5
3 changed files with 85 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
js/src/carousel.js
View File

@@ -385,6 +385,14 @@ const 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)

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

@@ -445,6 +445,54 @@ $(function () {
$carousel.remove()
})
QUnit.test('should set interval from data attribute on individual carousel-item', function (assert) {
assert.expect(2)
var templateHTML = '<div id="myCarousel" class="carousel slide" data-interval="1814">' +
'<div class="carousel-inner">' +
'<div class="carousel-item active" data-interval="2814">' +
'<img alt="">' +
'<div class="carousel-caption">' +
'<h4>First Thumbnail label</h4>' +
'<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' +
'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' +
'ultricies vehicula ut id elit.</p>' +
'</div>' +
'</div>' +
'<div class="carousel-item" data-interval="3814">' +
'<img alt="">' +
'<div class="carousel-caption">' +
'<h4>Second Thumbnail label</h4>' +
'<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' +
'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' +
'ultricies vehicula ut id elit.</p>' +
'</div>' +
'</div>' +
'<div class="carousel-item">' +
'<img alt="">' +
'<div class="carousel-caption">' +
'<h4>Third Thumbnail label</h4>' +
'<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' +
'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' +
'ultricies vehicula ut id elit.</p>' +
'</div>' +
'</div>' +
'</div>' +
'<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>' +
'<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>' +
'</div>'
var $carousel = $(templateHTML)
$carousel.appendTo('body')
$carousel.bootstrapCarousel(1)
assert.strictEqual($carousel.data('bs.carousel')._config.interval, 3814)
$carousel.remove()
$carousel.appendTo('body')
$carousel.bootstrapCarousel(2)
assert.strictEqual($carousel.data('bs.carousel')._config.interval, 1814, 'reverts to default interval if no data-interval is set')
$carousel.remove()
})
QUnit.test('should skip over non-items when using item indices', function (assert) {
assert.expect(2)
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">' +