BS5 Carousel
Bootstrap 5 Carousel
A slideshow that cycles over elements is called a carousel.
==== IMAGE MUKAVI ====
How To Create a Carousel
An illustration of how to make a simple carousel with controls and indicators can be found below:
Example
<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Los Angeles" class="d-block w-100" title="Bs5 Carousel 1" data-lazy-src="la.jpg"><noscript><img decoding="async" src="la.jpg" alt="Los Angeles" class="d-block w-100" title="Bs5 Carousel 1"></noscript>
</div>
<div class="carousel-item">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Chicago" class="d-block w-100" title="Bs5 Carousel 2" data-lazy-src="chicago.jpg"><noscript><img decoding="async" src="chicago.jpg" alt="Chicago" class="d-block w-100" title="Bs5 Carousel 2"></noscript>
</div>
<div class="carousel-item">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="New York" class="d-block w-100" title="Bs5 Carousel 3" data-lazy-src="ny.jpg"><noscript><img decoding="async" src="ny.jpg" alt="New York" class="d-block w-100" title="Bs5 Carousel 3"></noscript>
</div>
</div>
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
Example explained
An explanation of the functions of each class in the previous example:
| Class | Description |
|---|---|
.carousel | Creates a carousel |
.carousel-indicators | Adds indicators for the carousel. These are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing) |
.carousel-inner | Adds slides to the carousel |
.carousel-item | Specifies the content of each slide |
.carousel-control-prev | Adds a left (previous) button to the carousel, which allows the user to go back between the slides |
.carousel-control-next | Adds a right (next) button to the carousel, which allows the user to go forward between the slides |
.carousel-control-prev-icon | Used together with .carousel-control-prev to create a “previous” button |
.carousel-control-next-icon | Used together with .carousel-control-next to create a “next” button |
.slide | Adds a CSS transition and animation effect when sliding from one item to the next. Remove this class if you do not want this effect |
Add Captions to Slides
==== IMAGE MUKAVI ====
To make a caption for each slide, add components inside <div class=”carousel-caption”> within each <div class=”carousel-item”>:
Example
<div class="carousel-item">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Los Angeles" title="Bs5 Carousel 4" data-lazy-src="la.jpg"><noscript><img decoding="async" src="la.jpg" alt="Los Angeles" title="Bs5 Carousel 4"></noscript>
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
