Use Page Visibility API in Carousel; fixes #17706

Avoids cycling carousels when the page isn't visible.
Closes #17710
Refs #15566

diff --git a/js/src/carousel.js b/js/src/carousel.js
index d8da854a22061fcbfcb8895edf6b5b0c15880624..8d47fbf9b45a31db51a9f5fd02778d6acb26b976 100644 (file)
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -119,6 +119,13 @@ const Carousel = (($) => {
       }
     }
 
+    nextWhenVisible() {
+      // Don't call next when the page isn't visible
+      if (!document.hidden) {
+        this.next()
+      }
+    }
+
     prev() {
       if (!this._isSliding) {
         this._slide(Direction.PREVIOUS)
@@ -152,7 +159,7 @@ const Carousel = (($) => {
 
       if (this._config.interval && !this._isPaused) {
         this._interval = setInterval(
-          $.proxy(this.next, this), this._config.interval
+          $.proxy(document.visibilityState ? this.nextWhenVisible : this.next, this), this._config.interval
         )
       }
     }

diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html
index 47dacaa6a0e30edf0826d5521ebde19ccf42121e..e6bfeedab0e2a54629852e65bed56afb7b33ca5c 100644 (file)
--- a/js/tests/visual/carousel.html
+++ b/js/tests/visual/carousel.html
@@ -21,7 +21,7 @@
   <div class="page-header">
     <h1>Carousel <small>Bootstrap Visual Test</small></h1>
   </div>
-
+  <p>Also, the carousel shouldn't slide when its window/tab is hidden. Check the console log.</p>
   <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
     <ol class="carousel-indicators">
       <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
@@ -53,6 +53,14 @@
 <script src="../vendor/jquery.min.js"></script>
 <script src="../../dist/util.js"></script>
 <script src="../../dist/carousel.js"></script>
+<script>
+  $(function () {
+    // Test to show that the carousel doesn't slide when the current tab isn't visible
+    $('#carousel-example-generic').on('slid.bs.carousel', function (event) {
+      console.log('slid at ', event.timeStamp);
+    })
+  });
+</script>
 
 </body>
 </html>