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()
       }
     }
diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js
index 894f78ab5139..b110fbd65d1c 100644
--- a/js/tests/unit/carousel.js
+++ b/js/tests/unit/carousel.js
@@ -842,4 +842,80 @@ $(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)
+  })
+
+  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)
+  })
 })