bootstrap.native
Version:
Bootstrap components build with Typescript
83 lines (80 loc) • 3.81 kB
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>