{% carousel %}
Attributes
| Parameter | Type | Required | Description |
|---|---|---|---|
autoplay | boolean | โ | Auto-advance slides on a timer โ defaults to false |
interval | number | โ | Autoplay interval in milliseconds โ defaults to 5000 (5 seconds) |
loop | boolean | โ | Allow infinite looping from the last slide back to the first โ defaults to true |
Valid Children
| Tag | Multiplicity |
|---|---|
{% slide %} | [*] |
Valid Parent Contexts
This tag is valid inside: {% article %}
Rules
| Rule | Force | Realm | Reference | Description |
|---|---|---|---|---|
carousel-children-must-be-slides | | | โ | Direct children of must be tags. Any content placed outside a inside a is ignored by the renderer. |
carousel-no-nesting | | | โ | Nested carousels are not supported. A may not appear inside a . |
Rendering
Carousel.astro renders a tabbed or paged slideshow. Navigation controls (prev/next buttons, slide indicators) are always visible. When autoplay=true, slides advance every interval milliseconds. loop=true wraps from the last slide back to the first.
Each \{% slide %\} is rendered by CarouselSlide.astro, which receives the label as a tab/indicator label and the child content as its body.
Two-slide carousel with labelled tabs and a callout
{% carousel %}
{% slide label="Noticing" %}### The Noticing Game
**Players:** 2 ยท **Duration:** 10โ15 min ยท **Difficulty:** Beginner
One player shares observations about the other: *"Being in your presence, I notice..."*
{% callout color="blue" %}Report your *experience of* the other person, not your *interpretation* of them.{% /callout %}{% /slide %}
{% slide label="Hot Seat" %}### The Hot Seat
**Players:** 3โ8 ยท **Duration:** 15โ20 min per person ยท **Difficulty:** Intermediate
One person sits in the "hot seat." The group asks any questions.{% /slide %}
{% /carousel %} Autoplay carousel with 4-second interval
{% carousel autoplay=true interval=4000 loop=true %}{% slide label="Step 1" %}First slide content.{% /slide %}{% slide label="Step 2" %}Second slide content.{% /slide %}{% /carousel %}