Mark · Components
Carousel
Slides, one at a time. The mechanism is the engine's — carousel and its parts, untouched — but the default SHAPE is Mark's: still until asked to move, steerable without homework, and named to the platform when you name it. The bare default is the mechanism plus the way to drive it — arrows. Motion, indicators, captions and crossfade are all things you ask for. Bootstrap ships the reverse (auto-advancing, controls opt-in), which is motion nobody asked for and navigation everyone re-types.
Default — still, and steerable
Full page preview ↗
<div class="carousel slide" id="carousel-demo" role="region" aria-roledescription="carousel" aria-label="Demo slides">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/assets/img/everlasting.jpg" class="d-block w-100" alt="A generated colour field" loading="eager" decoding="async">
</div>
<div class="carousel-item">
<img src="/assets/img/everlasting.jpg" class="d-block w-100" alt="A generated colour field" loading="lazy" decoding="async">
</div>
<div class="carousel-item">
<img src="/assets/img/everlasting.jpg" class="d-block w-100" alt="A generated colour field" loading="lazy" decoding="async">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carousel-demo" 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="#carousel-demo" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>id: carousel-demo
label: Demo slides
items: [3 items]Indicators, asked for
Full page preview ↗
<div class="carousel slide" id="carousel-dots-demo">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carousel-dots-demo" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carousel-dots-demo" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carousel-dots-demo" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/assets/img/everlasting.jpg" class="d-block w-100" alt="A generated colour field" loading="eager" decoding="async">
</div>
<div class="carousel-item">
<img src="/assets/img/everlasting.jpg" class="d-block w-100" alt="A generated colour field" loading="lazy" decoding="async">
</div>
<div class="carousel-item">
<img src="/assets/img/everlasting.jpg" class="d-block w-100" alt="A generated colour field" loading="lazy" decoding="async">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carousel-dots-demo" 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="#carousel-dots-demo" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>id: carousel-dots-demo
indicators: true
items: [3 items]Captions
Full page preview ↗
First slide
Nothing moves until you say so.
Second slide
You got here on purpose.
<div class="carousel slide" id="carousel-caption-demo">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/assets/img/everlasting.jpg" class="d-block w-100" alt="A generated colour field" loading="eager" decoding="async">
<div class="carousel-caption d-none d-md-block">
<p class="h5 mb-1">First slide</p>
<p class="mb-0">Nothing moves until you say so.</p>
</div>
</div>
<div class="carousel-item">
<img src="/assets/img/everlasting.jpg" class="d-block w-100" alt="A generated colour field" loading="lazy" decoding="async">
<div class="carousel-caption d-none d-md-block">
<p class="h5 mb-1">Second slide</p>
<p class="mb-0">You got here on purpose.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carousel-caption-demo" 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="#carousel-caption-demo" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>id: carousel-caption-demo
items: [2 items]Crossfade
Full page preview ↗
<div class="carousel slide carousel-fade" id="carousel-fade-demo">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/assets/img/everlasting.jpg" class="d-block w-100" alt="A generated colour field" loading="eager" decoding="async">
</div>
<div class="carousel-item">
<img src="/assets/img/everlasting.jpg" class="d-block w-100" alt="A generated colour field" loading="lazy" decoding="async">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carousel-fade-demo" 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="#carousel-fade-demo" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>id: carousel-fade-demo
fade: true
items: [2 items]Auto — the treatment, asked for
Full page preview ↗
<div class="carousel slide" id="carousel-auto-demo" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/assets/img/everlasting.jpg" class="d-block w-100" alt="A generated colour field" loading="eager" decoding="async">
</div>
<div class="carousel-item">
<img src="/assets/img/everlasting.jpg" class="d-block w-100" alt="A generated colour field" loading="lazy" decoding="async">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carousel-auto-demo" 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="#carousel-auto-demo" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>id: carousel-auto-demo
auto: true
items: [2 items]Fields (8)
| Field | Type | Notes |
|---|---|---|
id |
text | Distinct per carousel when a page carries more than one — it wires the arrows and indicators to their slides |
label |
text | Names the region for screen readers, e.g. "Featured work" — like the button group, the name is what turns the announcement on |
auto |
boolean | Every 5 seconds, pausing on hover. Off on purpose: moving content is a treatment, and treatments ask |
fade |
boolean | Dissolve between slides instead of sliding |
controls |
boolean | Previous/next — the one thing on by default; a carousel you cannot steer is a screensaver |
indicators |
boolean | The position dashes — tells a reader how much there is. Off by default; the bare shape is arrows alone |
class_names |
text | |
items |
repeater |