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

adds the ability to assign data-interval to an individual carousel-item

2 files changed, 56 insertions, 0 deletions

diff --git a/js/src/carousel.js b/js/src/carousel.js
index 2d7ab0d672..610319a6e0 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -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)
diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js
index baabcf426f..20b12f4b06 100644
--- a/js/tests/unit/carousel.js
+++ b/js/tests/unit/carousel.js
@@ -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">' +