Bs5 Carousel in Bootstrap
In Bootstrap 5 (BS5), the carousel component is used to create image or content sliders with controls, indicators, and autoplay support. It’s fully responsive and touch-enabled.
? Basic Carousel
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 1"> </div> <div class="carousel-item"> <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 2"> </div> <div class="carousel-item"> <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 3"> </div> </div></div>carousel slide: Enables sliding animation.data-bs-ride="carousel": Starts the carousel automatically.
?? With Indicators
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></button> </div> <div class="carousel-inner"> <!-- carousel-item slides --> </div></div>? With Controls (Prev/Next)
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span></button>Add these inside the carousel container after the .carousel-inner.
? With Captions
<div class="carousel-item active"> <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p>Some representative placeholder content.</p> </div></div>?? Optional JavaScript Control
var myCarousel = document.querySelector('#carouselExample')var carousel = new bootstrap.Carousel(myCarousel, { interval: 2000, wrap: true})?? Carousel Options
| Option | Type | Default | Description |
|---|---|---|---|
interval | number | 5000 | Delay between auto cycling (ms) |
wrap | boolean | true | Cycle continuously or stop at end |
keyboard | boolean | true | Keyboard navigation |
pause | string | "hover" | Pause cycling on mouse hover |
Would you like an example of a multi-item carousel, responsive carousel, or custom animation effects next?
