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

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

3 files changed, 85 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">' +
diff --git a/site/docs/4.1/components/carousel.md b/site/docs/4.1/components/carousel.md
index 7c4a0472ec..543b06430a 100644
--- a/site/docs/4.1/components/carousel.md
+++ b/site/docs/4.1/components/carousel.md
@@ -190,6 +190,35 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i
 {% endcapture %}
 {% include example.html content=example %}
 
+### Individual `.carousel-item` interval
+
+Add `data-interval=""` to a `.carousel-item` to change the amount of time to delay between automatically cycling to the next item.
+
+{% capture example %}
+<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
+  <div class="carousel-inner">
+    <div class="carousel-item active" data-interval="10000">
+      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
+    </div>
+    <div class="carousel-item" data-interval="20000">
+      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
+    </div>
+    <div class="carousel-item">
+      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
+    </div>
+  </div>
+  <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
+    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+    <span class="sr-only">Previous</span>
+  </a>
+  <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
+    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <span class="sr-only">Next</span>
+  </a>
+</div>
+{% endcapture %}
+{% include example.html content=example %}
+
 
 ## Usage