UNPKG

bootstrap.native

Version:

Bootstrap components build with Typescript

83 lines (80 loc) 3.81 kB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BSN Testing Page</title> <link id="bsCSS" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <style> .item-bg { position: absolute; top: 0; left: 0; width: 100%; height: 500px; } .carousel-item { transition-duration: 0.2s;} .carousel-item, .carousel { width: 100%; height: 500px; } </style> </head> <body class="container" style="padding: 3rem"> <h3>Carousel Example</h3> <div id="myCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="7000" data-bs-pause="hover" data-bs-keyboard="true" data-cy="carousel"> <div class="carousel-indicators"> <button aria-label="Carousel Slide 1" data-bs-target="#myCarousel" data-bs-slide-to="0"></button> <button aria-label="Carousel Slide 2" data-bs-target="#myCarousel" data-bs-slide-to="1"></button> <button aria-label="Carousel Slide 3" data-bs-target="#myCarousel" data-bs-slide-to="2"></button> </div> <div class="carousel-inner" role="listbox"> <div class="carousel-item"> <div class="item-bg bg-warning"></div> <div class="container d-flex align-items-end h-100"> <div class="position-relative text-dark text-left mb-5"> <h1>Slide 1 Title Should Be A Little Longer</h1> <p class="lead">Slide 1 Text Should Be A Little Longer.</p> <p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse.</p> </div> </div> </div> <div class="carousel-item"> <div class="item-bg bg-info"></div> <div class="container d-flex align-items-end h-100"> <div class="position-relative text-dark w-100 mb-5"> <h1>Slide 2 Title Should Be A Little Longer</h1> <p class="lead">Slide 2 Text Should Be A Little Longer.</p> <p>Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p> </div> </div> </div> <div class="carousel-item"> <div class="item-bg bg-danger"></div> <div class="container d-flex align-items-end h-100"> <div class="position-relative text-white text-right w-100 mb-5"> <h1>Slide 3 Title Should Be A Little Longer</h1> <p class="lead">Slide 3 Text Should Be A Little Longer.</p> <p>Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Elit wolf voluptate, lo-fi ea portland before they sold out four loko</p> </div> </div> </div> </div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </a> </div> </body> </html>