Carousel
A slideshow component for cycling through elements
Divergence from Blok
Custom implementation — not an Embla Carousel wrapper. Blok wraps embla-carousel with opts, plugins, setApi, and built-in keyboard navigation. Ours is hand-rolled with CurrentIndex, TransitionDuration, and a CarouselOrientation enum — there is no Embla API surface. Missing features: touch/swipe, autoplay, plugin ecosystem. Additive: user-configurable TransitionDuration (Blok hardcodes it).
Examples
Default
1
First slide
2
Second slide
3
Third slide
4
Fourth slide
5
Fifth slide
With Cards
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| Carousel | Root of the carousel. Owns the current slide index and cascades itself to CarouselContent, CarouselItem, CarouselPrevious, and CarouselNext so they can read/update index state. |
| CarouselContent | Viewport + track. Clips overflow and translates the inner flex track by CurrentIndex * 100% on each change. |
| CarouselItem | A single slide. Sized to fill the viewport (basis-full) and pads itself against the previous item. Registers with the parent Carousel on init to increment ItemCount. |
| CarouselPrevious | Floating chevron-left button that calls ScrollPrev on the parent. Auto-disabled at the first slide. |
| CarouselNext | Floating chevron-right button that calls ScrollNext on the parent. Auto-disabled at the last slide. |
Carousel
Root of the carousel. Owns the current slide index and cascades itself to CarouselContent, CarouselItem, CarouselPrevious, and CarouselNext so they can read/update index state.
| Property | Type | Required | Description |
|---|---|---|---|
| Orientation | CarouselOrientation | Slide direction. Default: CarouselOrientation.Horizontal. Other value: Vertical. | |
| TransitionDuration | int | Slide transition length in milliseconds. Default: 300. | |
| ClassName | string? | Extra CSS classes appended to the outer carousel region. | |
| ChildContent | RenderFragment? | Must contain a CarouselContent and typically a CarouselPrevious + CarouselNext pair. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the outer region. |
CarouselContent
Viewport + track. Clips overflow and translates the inner flex track by CurrentIndex * 100% on each change.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the inner track. | |
| ChildContent | RenderFragment? | One or more CarouselItem children. |
CarouselItem
A single slide. Sized to fill the viewport (basis-full) and pads itself against the previous item. Registers with the parent Carousel on init to increment ItemCount.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the slide wrapper. | |
| ChildContent | RenderFragment? | Slide content. |
CarouselPrevious
Floating chevron-left button that calls ScrollPrev on the parent. Auto-disabled at the first slide.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the button. |
CarouselNext
Floating chevron-right button that calls ScrollNext on the parent. Auto-disabled at the last slide.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the button. |