UICarousel
A set of slides shown one at a time, with controls to move through them.
A carousel shows a few related slides in the same space. Use it sparingly: people often miss what is not on the first slide.
When to use it
Use it
- Three to five slides, the most important first.
- Show the controls and the position indicators.
- Do not start it automatically.
Don't
- Hide essential content in later slides.
- Auto-advance faster than people can read.
- Put long text or forms in slides.
Anatomy
A frame (carousel) with slides (carousel-item, one active), optional captions, previous and next controls and indicators.
Variants and states
This Moodle version has no dark mode: examples stay light.
Combinations
| Combination | Use it for |
|---|---|
| Controls × indicators | Both: arrows to move, dots to know where you are and jump. |
| Slides × captions | A short caption over the slide; the text must read on the image. |
| Carousel × autoplay | Off. The user moves it. |
What Didactika changes and why
| What we changed | Why it helps |
|---|---|
| The controls are round buttons with a dark tint | They are visible over any image and are as big as a button, so they are easy to hit. |
| The current indicator is longer than the rest | Position is read from the shape and not from the colour of a dot. |
| The frame is rounded and clips the slides | It matches the cards around it. |
Classes
| Class | What it does |
|---|---|
carousel, slide |
The frame |
carousel-inner, carousel-item |
The slides |
carousel-control-prev, carousel-control-next |
Controls |
carousel-indicators |
Position dots |
carousel-caption |
Text over a slide |
In this version
Bootstrap 5.3 keeps its colours in CSS variables (--bs-*), so a theme recolours the component with one variable. Controls and indicators are buttons.
Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet. Controls are links and the indicators are list items.
Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet. Controls are links and the indicators are list items.
Accessibility
- Controls are buttons or links with text for assistive technology.
- Let the user pause or stop movement; do not auto-play.
- Each slide has text alternatives.