# Carousel block — recipe

**Locked 2026-08-04 as part of a452 Phase 5.**
**Tier:** 3 (generic MIT)

## A. Product Description

A scrolling display of images or content cards. Users can click arrows to move forward or backward. It loops automatically unless paused.

### UI structure
A container `div` containing a track of slide items and two control buttons (prev/next) positioned at the edges. Controls contain arrow icons.

### Layout
Block-level element. It spans the full width of its parent container.

### Geometry
Default width: 100%. Default height: 400px (or aspect-ratio of the first slide).

### States
- **Default:** The carousel shows the current slide. Navigation buttons may be hidden until interaction.
- **Hover:** Navigation buttons appear or highlight to indicate interactivity.
- **Active:** The carousel is currently animating to a new slide index.

## B. Structural Contract

### Inputs (props)
- `props.items` — Array, default [], containing the data/content for each slide.
- `props.autoplay` — Boolean, default `false`, toggles automatic looping.
- `props.interval` — Number, default 3000, duration in ms between slides when autoplay is on.
- `props.activeIndex` — Number, default 0, the current visible slide index.

### Outputs (events)
- `navigate(direction)` — fires when prev/next buttons are clicked.
- `slideChanged(index)` — fires when the index updates, either by click or auto-play.
- `mouseenter` — fires when the mouse enters the container (stops autoplay).
- `mouseleave` — fires when the mouse leaves the container (resumes autoplay).

### Module boundaries
This block is independent. It accepts no inner components or slots.

### Swap-test
To swap this block for a custom one: replace `modules/carousel.js` with a file that exports the same `render(props, slots)` function.

## C. Reconstruction Notes

### Evidence
The block's source is at `modules/carousel.js`. Trace lines to behaviour.

### Visual anchors
CSS class: `.fvcms-carousel` (the block's root element).

### Behavioural anchors
The block exports: `render(props, slots)` returning a DOM element.

## D. Source-line citations

The original implementation is at `modules/carousel.js`. See the shadow at `app-pact/shadow/v0.8.0-pre-fwv-v8-alignment/modules/carousel.js` for the pre-alignment snapshot.

Total: ~60-80 lines. Plain words, no jargon walls. Operator-readable.