Nearby lessons
23 of 39🎠 BS5 Carousel
📌 What Is the Bootstrap 5 Carousel?
The carousel is a slideshow. Use .carousel .slide on the wrapper, .carousel-inner for the slide container, and .carousel-item (with .active on the first) for each slide. Add data-bs-ride="carousel" for auto-cycling. Requires Bootstrap’s JavaScript.
🖼️ Carousel Structure (.carousel, .carousel-inner, .carousel-item, .active)
.carousel .slide – outer wrapper; .slide adds transition. .carousel-inner – holds all slides. .carousel-item – each slide (image or content). .active – the visible slide (put on first item). Give the carousel an id for controls and indicators.
⬅️➡️ Controls (.carousel-control-prev, .carousel-control-next)
.carousel-control-prev and .carousel-control-next – previous/next buttons. Use data-bs-target="#carouselId" and data-bs-slide="prev" or data-bs-slide="next". Include .carousel-control-prev-icon / .carousel-control-next-icon and a .visually-hidden label for accessibility.
🔘 Indicators (.carousel-indicators)
.carousel-indicators – dots for each slide. Buttons inside use data-bs-target="#carouselId" and data-bs-slide-to="0", data-bs-slide-to="1", etc. Add .active to the current slide’s indicator.
📝 Captions (.carousel-caption)
.carousel-caption – text overlay on a slide. Place inside .carousel-item. Use .d-none .d-md-block to hide on small screens if needed.
✅ Carousel Best Practices
- Use data-bs-ride="carousel" for auto-cycling; data-bs-interval sets delay in ms.
- Add aria-label on control buttons and .visually-hidden text for screen readers.
- Give the carousel a unique
idand use it in data-bs-target on controls and indicators.