| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <link href="../../../dist/css/bootstrap.min.css" rel="stylesheet"> |
| <title>Carousel</title> |
| </head> |
| <body> |
| <div class="container"> |
| <h1>Carousel <small>Bootstrap Visual Test</small></h1> |
| |
| <p>The carousel autoplays and shouldn't slide when its window/tab is hidden. Interacting with it (controls, keyboard, or swipe) stops autoplay for good. Check the console log.</p> |
| |
| <div id="carousel-example-generic" class="carousel slide" data-bs-autoplay="true"> |
| <div class="carousel-inner rounded-5"> |
| <div class="carousel-item active"> |
| <img class="d-block w-100" src="https://i.imgur.com/iEZgY7Y.jpg" alt="First slide"> |
| </div> |
| <div class="carousel-item"> |
| <img class="d-block w-100" src="https://i.imgur.com/eNWn1Xs.jpg" alt="Second slide"> |
| </div> |
| <div class="carousel-item"> |
| <img class="d-block w-100" src="https://i.imgur.com/Nm7xoti.jpg" alt="Third slide"> |
| </div> |
| </div> |
| <div class="d-flex justify-content-between align-items-center mt-3"> |
| <div class="carousel-indicators"> |
| <button type="button" data-bs-target="#carousel-example-generic" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> |
| <button type="button" data-bs-target="#carousel-example-generic" data-bs-slide-to="1" aria-label="Slide 2"></button> |
| <button type="button" data-bs-target="#carousel-example-generic" data-bs-slide-to="2" aria-label="Slide 3"></button> |
| </div> |
| <div> |
| <button class="btn-icon btn-sm carousel-control-play-pause" data-bs-target="#carousel-example-generic" type="button" aria-label="Pause" data-bs-pause-label="Pause" data-bs-play-label="Play"> |
| <span class="carousel-icon-pause" aria-hidden="true"></span> |
| <span class="carousel-icon-play" aria-hidden="true"></span> |
| </button> |
| <button class="btn-icon btn-sm" data-bs-target="#carousel-example-generic" type="button" data-bs-slide="prev"> |
| <span class="carousel-icon-prev" aria-hidden="true"></span> |
| <span class="visually-hidden">Previous</span> |
| </button> |
| <button class="btn-icon btn-sm" data-bs-target="#carousel-example-generic" type="button" data-bs-slide="next"> |
| <span class="carousel-icon-next" aria-hidden="true"></span> |
| <span class="visually-hidden">Next</span> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <script src="../../../dist/js/bootstrap.bundle.js" type="module"></script> |
| <script> |
| let t0 |
| let t1 |
| const carousel = document.getElementById('carousel-example-generic') |
| |
| // Test to show that the carousel doesn't slide when the current tab isn't visible |
| carousel.addEventListener('slid.bs.carousel', event => { |
| t1 = performance.now() |
| console.log(`slid took ${t1 - t0}ms, slid at ${event.timeStamp}`) |
| }) |
| carousel.addEventListener('slide.bs.carousel', () => { |
| t0 = performance.now() |
| }) |
| </script> |
| </body> |
| </html> |
