Base component
Carousel
Theme-aware, responsive carousel component.
22 props1 slots10 outputsTheme readyResponsive
Interactive playground
Configure Carousel
Change any prop and inspect the server-rendered component immediately.
Live preview
<Carousel
title="Carousel example"
description="A polished default carousel for a modern application."
items='[
{
"id": "carousel-0-1",
"key": "carousel-0-1",
"value": "primary",
"label": "Primary workflow",
"title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#carousel-demo",
"actionHref": "#carousel-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Standard"
]
},
{
"id": "carousel-0-2",
"key": "carousel-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#carousel-demo",
"actionHref": "#carousel-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Standard"
]
}
]'
showPagination="true"
showCounter="true"
ariaLabel="Carousel 1 example"
/>Event outputInteract with the preview to inspect the typed
payload.Live examples
Designed for real product surfaces
Compare configurations and resize the browser to check responsive behavior.
Recommended
01
Production default
Balanced spacing, hierarchy, and content for the most common product workflow.
Live preview
<Carousel
title="Carousel example"
description="A polished default carousel for a modern application."
items='[
{
"id": "carousel-0-1",
"key": "carousel-0-1",
"value": "primary",
"label": "Primary workflow",
"title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#carousel-demo",
"actionHref": "#carousel-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Standard"
]
},
{
"id": "carousel-0-2",
"key": "carousel-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#carousel-demo",
"actionHref": "#carousel-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Standard"
]
}
]'
showPagination="true"
showCounter="true"
ariaLabel="Carousel 1 example"
/>Dense UI
02
Compact application
A tighter variation for dashboards, side panels, tables, and operational interfaces.
Live preview
<Carousel
size="sm"
title="Compact Carousel"
description="A compact configuration for dashboards and dense product surfaces."
items='[
{
"id": "carousel-1-1",
"key": "carousel-1-1",
"value": "primary",
"label": "Secondary workflow",
"title": "Secondary workflow",
"description": "A compact configuration designed for dense application layouts.",
"text": "A configurable sample message.",
"href": "#carousel-demo",
"actionHref": "#carousel-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--zap]",
"iconClass": "icon-[lucide--zap]",
"variant": "secondary",
"status": "Active",
"time": "10:15",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 24,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 1",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Standard"
]
},
{
"id": "carousel-1-2",
"key": "carousel-1-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A compact configuration designed for dense application layouts.",
"text": "Another configurable message.",
"href": "#carousel-demo",
"actionHref": "#carousel-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--zap]",
"iconClass": "icon-[lucide--zap]",
"variant": "secondary",
"status": "Active",
"time": "10:15",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 48,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 2",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Standard"
]
}
]'
showPagination="true"
showCounter="true"
ariaLabel="Carousel 2 example"
variant="secondary"
/>Extended
03
Rich configuration
A more expressive variation using additional data, stronger emphasis, and optional states.
Live preview
<Carousel
size="lg"
title="Advanced Carousel"
description="A richer configuration demonstrating additional content and hierarchy."
items='[
{
"id": "carousel-2-1",
"key": "carousel-2-1",
"value": "primary",
"label": "Advanced workflow",
"title": "Advanced workflow",
"description": "A richer configuration with more supporting information and actions.",
"text": "A configurable sample message.",
"href": "#carousel-demo",
"actionHref": "#carousel-demo",
"actionLabel": "Explore workflow",
"icon": "icon-[lucide--circle-check]",
"iconClass": "icon-[lucide--circle-check]",
"variant": "success",
"status": "Complete",
"time": "11:45",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 32,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 1",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Unlimited"
]
},
{
"id": "carousel-2-2",
"key": "carousel-2-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A richer configuration with more supporting information and actions.",
"text": "Another configurable message.",
"href": "#carousel-demo",
"actionHref": "#carousel-demo",
"actionLabel": "Explore workflow",
"icon": "icon-[lucide--circle-check]",
"iconClass": "icon-[lucide--circle-check]",
"variant": "success",
"status": "Complete",
"time": "11:45",
"current": false,
"selected": false,
"checked": false,
"disabled": true,
"outgoing": true,
"open": true,
"number": 2,
"count": 64,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 2",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Unlimited"
]
}
]'
showPagination="true"
showCounter="true"
ariaLabel="Carousel 3 example"
variant="success"
/>Component outputs
Receive every typed component output
Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.
@initializeFires when the component emits the initialize event.@changeFires when the component's committed value or selection changes.@previousFires when the component emits the previous event.@nextFires when the component emits the next event.@playFires when the component emits the play event.@pauseFires when the component emits the pause event.@reachStartFires when the component emits the reachStart event.@reachEndFires when the component emits the reachEnd event.@dragStartFires when the component emits the dragStart event.@dragEndFires when the component emits the dragEnd event.<Carousel
@initialize='console.log(payload)'
@change='console.log(payload)'
@previous='console.log(payload)'
@next='console.log(payload)'
@play='console.log(payload)'
@pause='console.log(payload)'
@reachStart='console.log(payload)'
@reachEnd='console.log(payload)'
@dragStart='console.log(payload)'
@dragEnd='console.log(payload)'
/>import { registerOutputHandler } from "@wrnexus/csr/outputs"
const component = document.querySelector("[data-ui-component=\"Carousel\"], [data-component=\"Carousel\"]")
if (component) registerOutputHandler(component, "initialize", (payload) => {
console.log("initialize", payload)
})
if (component) registerOutputHandler(component, "change", (payload) => {
console.log("change", payload)
})
if (component) registerOutputHandler(component, "previous", (payload) => {
console.log("previous", payload)
})
if (component) registerOutputHandler(component, "next", (payload) => {
console.log("next", payload)
})
if (component) registerOutputHandler(component, "play", (payload) => {
console.log("play", payload)
})
if (component) registerOutputHandler(component, "pause", (payload) => {
console.log("pause", payload)
})
if (component) registerOutputHandler(component, "reachStart", (payload) => {
console.log("reachStart", payload)
})
if (component) registerOutputHandler(component, "reachEnd", (payload) => {
console.log("reachEnd", payload)
})
if (component) registerOutputHandler(component, "dragStart", (payload) => {
console.log("dragStart", payload)
})
if (component) registerOutputHandler(component, "dragEnd", (payload) => {
console.log("dragEnd", payload)
})Component API
Props and configuration
All content and behavior shown above is supplied through these props and slots.
| Prop | Type | Default | Required |
|---|---|---|---|
size | string | "default" | No |
color | string | "primary" | No |
title | string | "" | No |
description | string | "" | No |
items | unknown[] | [] | No |
activeIndex | number | 0 | No |
slidesPerView | number | 1 | No |
gap | string | "0.75rem" | No |
showPagination | boolean | false | No |
isAutoPlay | boolean | false | No |
autoplayInterval | number | 4000 | No |
isInfiniteLoop | boolean | false | No |
isRTL | boolean | false | No |
isCentered | boolean | false | No |
isDraggable | boolean | false | No |
isAutoHeight | boolean | false | No |
isSnap | boolean | false | No |
showCounter | boolean | false | No |
thumbnails | string | "none" | No |
ariaLabel | string | "Content carousel" | No |
variant | string | "default" | No |
class | string | "" | No |