Carousel

Bootstrap 5.3 native .carousel — slides, crossfade, dark controls, captions, cards, progress sync, thumbnail nav, and every useful data-bs-* knob. Photos are royalty-free from Unsplash. This page uses Bootstrap only (no Owl) for these demos.

Official docs cover the minimum; here you’ll find fade + slide, carousel-dark, wrap / pause / touch / keyboard toggles, ratio + rounded frames, card & testimonial slides, external controls, pill indicators, and a progress bar wired to slid.bs.carousel.

Carousel docs

1 · Standard slide + indicators + captions

data-bs-ride="carousel", default interval. .carousel-caption with d-none d-md-block for responsive hiding.

2 · Fast autoplay

data-bs-interval="1800" — still pauses on hover unless you disable that (see #5).

3 · Crossfade

Add .carousel-fade to the root — opacity crossfade instead of sliding transform.

4 · .carousel-dark on a dark surface

Use when the carousel sits on .bg-dark or similar — controls/indicators flip to light strokes (per Bootstrap).

5 · No infinite wrap

data-bs-wrap="false" — prev/next disable at ends.

6 · No pause on hover

data-bs-pause="false" keeps the interval running when the pointer rests on the carousel.

7 · Disable touch swipe

data-bs-touch="false" — useful when swipe competes with maps or nested sliders.

8 · Disable keyboard

data-bs-keyboard="false" — when focus should not move slides.

9 · Manual start (no ride)

Omit data-bs-ride — carousel stays still until the user interacts (then BS can start cycling if you call carousel() in JS).

10 · Single item

Valid markup with one .carousel-item — controls still render (edge case for CMS).

11 · Pill indicators + circular controls

Indicators use helper class .carousel-pill-indicators; controls use .carousel-btn-round.

12 · Controls pushed outside (desktop)

Wrapper .carousel-controls-outside — on small screens arrows tuck back inside.

13 · Full-bleed (fluid)

Break out of the container with .container-fluid px-0 for edge-to-edge heroes.

14 · Three cards per slide

Each .carousel-item holds a .row of cards — great for product grids. No data-bs-ride plus data-bs-interval="false" keeps it manual (controls only).

15 · Testimonial slides

No photos — quote + avatar initials inside .carousel-item.

“Bootstrap’s carousel is accessible out of the box if you keep aria-labels on indicators.”
Alex M. · Frontend
“Pair captions with gradient tiles so text never fights the photograph.”
Jordan P. · Design
“Use data-bs-interval="false" when slides are heavy or user-paced.”
Riley T. · Performance

16 · Text / marketing slides

Replace imagery with colored panels — works in light & dark via Bootstrap tokens.

17 · Split layout slide

Each slide = .row.g-0 with image + copy columns.

18 · Progress bar sync

Listen for slid.bs.carousel — not in core Bootstrap; tiny script below updates width.

19 · External controls

Any element can call data-bs-target + data-bs-slide / data-bs-slide-to.

20 · Thumbnail strip navigation

data-bs-slide-to on buttons + script toggles .active on strip.

21 · Controls only (no dots)

Omit the .carousel-indicators block entirely — cleaner chrome.

22 · Fade + dark chrome + manual timing

Combine .carousel-fade, .carousel-dark, and data-bs-interval="false" for a calm, editor-controlled deck on a light strip.

Owl Carousel is still loaded site-wide for other demos; this page intentionally uses only the Bootstrap carousel API. Photos use direct Unsplash file URLs that were checked for HTTP 200 responses; if a photo is ever retired, swap the src for a current image from Unsplash or another royalty-free source.