Live
x
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.css" crossorigin="anonymous"> <!-- JS --> <script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script> <script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script> <script type="module" src="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.mjs" crossorigin="anonymous"></script> <script nomodule src="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous" async fetchpriority="low"></script></head><body> <bento-base-carousel id="my-carousel"> <img height="1200" width="675" src="https://satyr.dev/1200x16:9/1" fetchpriority="high" alt="" /> <img height="1200" width="675" src="https://satyr.dev/1200x16:9/2" fetchpriority="low" loading="lazy" alt="" /> <img height="1200" width="675" src="https://satyr.dev/1200x16:9/3" fetchpriority="low" loading="lazy" alt="" /> <img height="1200" width="675" src="https://satyr.dev/1200x16:9/4" fetchpriority="low" loading="lazy" alt="" /> <img height="1200" width="675" src="https://satyr.dev/1200x16:9/5" fetchpriority="low" loading="lazy" alt="" /> </bento-base-carousel> <div class="container"> <h1>Testing carousel without hints</h1> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Earum repellendus, alias quam esse obcaecati reprehenderit possimus impedit error delectus tempora quod, eveniet dolore molestias maxime porro? Sunt, doloremque vitae. Porro. </p> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae voluptatibus nam, optio sint soluta nulla temporibus nihil ratione! Maiores consequuntur ipsa eos et rem in, cupiditate magnam aspernatur velit eligendi. </p> </div></body>
Live
xxxxxxxxxx19
body { margin: 0;}.container { padding: 3rem;}bento-base-carousel { height: 56.25vh; width: 100vw;}bento-base-carousel > img { width: 100%; height: 100%; object-fit: cover;}
Live
xxxxxxxxxx8
(async () => { const carousel = document.querySelector("#my-carousel"); await customElements.whenDefined("bento-base-carousel"); const api = await carousel.getApi(); // programatically advance to next slide api.next();})();
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.