From 768c17ae9df2372b8f79aa8ca99eca9c80d9b5eb Mon Sep 17 00:00:00 2001
From: Johann-S <johann.servoire@gmail.com>
Date: Thu, 17 Aug 2017 17:44:09 +0200
Subject: [PATCH 1/3] Carousel - do not call next when the carousel or the
 parent isn't visible

---
 js/src/carousel.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/js/src/carousel.js b/js/src/carousel.js
index a5d5f143a497..27a8f7d3b82d 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -131,7 +131,9 @@ const Carousel = (($) => {
 
     nextWhenVisible() {
       // Don't call next when the page isn't visible
-      if (!document.hidden) {
+      // or the carousel or it's parent isn't visible
+      if (!document.hidden &&
+        ($(this._element).is(':visible') && $(this._element).css('visibility') !== 'hidden')) {
         this.next()
       }
     }

From 3f78769e1eea5a16dfdef7d7e4628e8833d87ae1 Mon Sep 17 00:00:00 2001
From: Johann-S <johann.servoire@gmail.com>
Date: Thu, 17 Aug 2017 18:18:49 +0200
Subject: [PATCH 2/3] Unit test to check if our carousel do not cycle when we
 cannot see it

---
 js/tests/unit/carousel.js | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js
index 894f78ab5139..cef4615761fc 100644
--- a/js/tests/unit/carousel.js
+++ b/js/tests/unit/carousel.js
@@ -842,4 +842,41 @@ $(function () {
     })
     $textArea.trigger(eventKeyDown)
   })
+
+  QUnit.test('Should not go to the next item when the carousel is not visible', function (assert) {
+    assert.expect(2)
+    var done = assert.async()
+    var html = '<div id="myCarousel" class="carousel slide" data-interval="50" style="display: none;">'
+             + '  <div class="carousel-inner">'
+             + '    <div id="firstItem" class="carousel-item active">'
+             + '      <img alt="">'
+             + '    </div>'
+             + '    <div class="carousel-item">'
+             + '      <img alt="">'
+             + '    </div>'
+             + '    <div class="carousel-item">'
+             + '      <img alt="">'
+             + '    </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 $html = $(html)
+    $html
+      .appendTo('#qunit-fixture')
+      .bootstrapCarousel()
+
+    var $firstItem = $('#firstItem')
+    setTimeout(function () {
+      assert.ok($firstItem.hasClass('active'))
+      $html
+        .bootstrapCarousel('dispose')
+        .attr('style', 'visibility: hidden;')
+        .bootstrapCarousel()
+
+      setTimeout(function () {
+        assert.ok($firstItem.hasClass('active'))
+        done()
+      }, 80)
+    }, 80)
+  })
 })

From fb2cfd7691544f397463fcc0afd2fc032011607f Mon Sep 17 00:00:00 2001
From: Johann-S <johann.servoire@gmail.com>
Date: Thu, 17 Aug 2017 18:29:15 +0200
Subject: [PATCH 3/3] Add a unit test to check if the carousel do not cycle
 when its parent isn't visible

---
 js/tests/unit/carousel.js | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js
index cef4615761fc..b110fbd65d1c 100644
--- a/js/tests/unit/carousel.js
+++ b/js/tests/unit/carousel.js
@@ -879,4 +879,43 @@ $(function () {
       }, 80)
     }, 80)
   })
+
+  QUnit.test('Should not go to the next item when the parent of the carousel is not visible', function (assert) {
+    assert.expect(2)
+    var done = assert.async()
+    var html = '<div id="parent" style="display: none;">'
+             + '  <div id="myCarousel" class="carousel slide" data-interval="50" style="display: none;">'
+             + '    <div class="carousel-inner">'
+             + '      <div id="firstItem" class="carousel-item active">'
+             + '        <img alt="">'
+             + '      </div>'
+             + '      <div class="carousel-item">'
+             + '        <img alt="">'
+             + '      </div>'
+             + '      <div class="carousel-item">'
+             + '        <img alt="">'
+             + '      </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>'
+             + '</div>'
+    var $html = $(html)
+    $html.appendTo('#qunit-fixture')
+    var $parent = $html.find('#parent')
+    var $carousel = $html.find('#myCarousel')
+    $carousel.bootstrapCarousel()
+    var $firstItem = $('#firstItem')
+
+    setTimeout(function () {
+      assert.ok($firstItem.hasClass('active'))
+      $carousel.bootstrapCarousel('dispose')
+      $parent.attr('style', 'visibility: hidden;')
+      $carousel.bootstrapCarousel()
+
+      setTimeout(function () {
+        assert.ok($firstItem.hasClass('active'))
+        done()
+      }, 80)
+    }, 80)
+  })
 })