// Generated by scripts/generate-showcase.mjs. Do not edit directly. page CarouselDetail { layout = "showcase" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_title = ctx.url.searchParams.get("pg_title") ?? "Carousel example" state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default carousel for a modern application." state playground_items = JSON.parse(ctx.url.searchParams.get("pg_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\"]}]") state playground_activeIndex = Number(ctx.url.searchParams.get("pg_activeIndex") ?? "0") state playground_slidesPerView = Number(ctx.url.searchParams.get("pg_slidesPerView") ?? "1") state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "0.75rem" state playground_showPagination = (ctx.url.searchParams.get("pg_showPagination") ?? "true") === "true" state playground_isAutoPlay = (ctx.url.searchParams.get("pg_isAutoPlay") ?? "false") === "true" state playground_autoplayInterval = Number(ctx.url.searchParams.get("pg_autoplayInterval") ?? "4000") state playground_isInfiniteLoop = (ctx.url.searchParams.get("pg_isInfiniteLoop") ?? "false") === "true" state playground_isRTL = (ctx.url.searchParams.get("pg_isRTL") ?? "false") === "true" state playground_isCentered = (ctx.url.searchParams.get("pg_isCentered") ?? "false") === "true" state playground_isDraggable = (ctx.url.searchParams.get("pg_isDraggable") ?? "false") === "true" state playground_isAutoHeight = (ctx.url.searchParams.get("pg_isAutoHeight") ?? "false") === "true" state playground_isSnap = (ctx.url.searchParams.get("pg_isSnap") ?? "false") === "true" state playground_showCounter = (ctx.url.searchParams.get("pg_showCounter") ?? "true") === "true" state playground_thumbnails = ctx.url.searchParams.get("pg_thumbnails") ?? "none" state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Carousel 1 example" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" seo { title = "Carousel" description = "Theme-aware, responsive carousel component." } view {
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
Component code
<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.
Component props22 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

01
Live preview
Component usage.wrn
<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

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

02
Live preview
Component usage.wrn
<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

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

03
Live preview
Component usage.wrn
<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.
Declarative handlers.wrn
<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)'
/>
Direct output handlers.js
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.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring""No
descriptionstring""No
itemsunknown[][]No
activeIndexnumber0No
slidesPerViewnumber1No
gapstring"0.75rem"No
showPaginationbooleanfalseNo
isAutoPlaybooleanfalseNo
autoplayIntervalnumber4000No
isInfiniteLoopbooleanfalseNo
isRTLbooleanfalseNo
isCenteredbooleanfalseNo
isDraggablebooleanfalseNo
isAutoHeightbooleanfalseNo
isSnapbooleanfalseNo
showCounterbooleanfalseNo
thumbnailsstring"none"No
ariaLabelstring"Content carousel"No
variantstring"default"No
classstring""No
} }