Bootstrap 5 Carousel
Add scrolling images or text to your website with the Bootstrap carousel component.
The Bootstrap carousel component enables you to add scrolling images and text that slide in, pause, then slide out. Controls enable the user to scroll forwards or backwards within the set. Basically a scrolling marquee with user controls.
Explanation
To create a basic carousel:
- Apply
.carousel
and.slide
to an outer container (with its own ID). - For the scrollable contents, wrap all items in a
.carousel-inner
and give each item a.carousel-item
class. - Also, you must apply
.active
to one of the slides in the carousel, otherwise the carousel won't be visible. This class allows you to set one slide as the initial slide (i.e. the starting slide). - Use the
.data-bs-ride
attribute to auto-start the carousel.
Add Controls
To add "Previous/Next" controls, use an <a>
with .carousel-control-prev
or carousel-control-next
. Also add a <span>
with .carousel-control-prev-icon
or .carousel-control-next-icon
.
Also add a .data-bs-target
on each control with the id
of the carousel it controls.
To cater for screenreaders, add <span>
s with the words "Previous" or "Next" and give them the .visually-hidden
class. This will hide this text from browsers, but read out the text in screenreaders.
Add Indicators
To add "indicator" controls (the little clickable areas at the bottom, center), add a list with .carousel-indicators
, as well as the applicable .data-bs-target
and .data-bs-slide-to
attributes.
Captions
You can add captions to your slideshow by adding a <div>
with the .carousel-caption
class applied. This goes inside each .carousel-item
.
Bootstrap 5 includes a lot more functionality than I've included in this tutorial. See the Bootstrap documentation for more.