// 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") ?? "" state playground_description = ctx.url.searchParams.get("pg_description") ?? "" state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"title\":\"A space to create\",\"description\":\"Bring your next idea to life.\",\"imageSrc\":\"/showcase-images/green-hero.svg\"},{\"title\":\"Made for teamwork\",\"description\":\"Keep everyone moving together.\",\"imageSrc\":\"/showcase-images/blue-mountain.svg\"},{\"title\":\"Room to grow\",\"description\":\"Build something that matters.\",\"imageSrc\":\"/showcase-images/violet-circle.svg\"}]") 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") ?? "Product highlights" state playground_framed = (ctx.url.searchParams.get("pg_framed") ?? "false") === "true" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" state playground_class = ctx.url.searchParams.get("pg_class") ?? "" seo { title = "Carousel" description = "Theme-aware, responsive carousel component." } view {
Base component

Carousel

Theme-aware, responsive carousel component.

23 props1 slots10 outputsTheme readyResponsive
Interactive playground

Configure Carousel

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
page CarouselExample {
  state items = [
  {
    "title": "A space to create",
    "description": "Bring your next idea to life.",
    "imageSrc": "/showcase-images/green-hero.svg"
  },
  {
    "title": "Made for teamwork",
    "description": "Keep everyone moving together.",
    "imageSrc": "/showcase-images/blue-mountain.svg"
  },
  {
    "title": "Room to grow",
    "description": "Build something that matters.",
    "imageSrc": "/showcase-images/violet-circle.svg"
  }
]
  view {
    <Carousel
      items="{items}"
      showPagination="true"
      showCounter="true"
      ariaLabel="Product highlights"
    />
  }
}
Event outputInteract with the preview to inspect the typed payload.
Component props23 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Full-width, unframed

An edge-to-edge carousel without a card, border, or outer padding.

01
Live preview
Component usage.wrn
page CarouselExample {
  state items = [
  {
    "title": "A space to create",
    "description": "Bring your next idea to life.",
    "imageSrc": "/showcase-images/green-hero.svg"
  },
  {
    "title": "Made for teamwork",
    "description": "Keep everyone moving together.",
    "imageSrc": "/showcase-images/blue-mountain.svg"
  },
  {
    "title": "Room to grow",
    "description": "Build something that matters.",
    "imageSrc": "/showcase-images/violet-circle.svg"
  }
]
  view {
    <Carousel
      items="{items}"
      showPagination="true"
      showCounter="true"
      ariaLabel="Product highlights"
    />
  }
}
Compact

Framed gallery

Opt into a contained gallery when the surrounding layout needs it.

02
Live preview
Component usage.wrn
page CarouselExample {
  state items = [
  {
    "title": "A space to create",
    "description": "Bring your next idea to life.",
    "imageSrc": "/showcase-images/green-hero.svg"
  },
  {
    "title": "Made for teamwork",
    "description": "Keep everyone moving together.",
    "imageSrc": "/showcase-images/blue-mountain.svg"
  },
  {
    "title": "Room to grow",
    "description": "Build something that matters.",
    "imageSrc": "/showcase-images/violet-circle.svg"
  }
]
  view {
    <Carousel
      items="{items}"
      showPagination="true"
      showCounter="true"
      ariaLabel="Product highlights"
      framed="true"
    />
  }
}
Advanced

Draggable slides

Move between slides with dragging, arrows, or pagination.

03
Live preview
Component usage.wrn
page CarouselExample {
  state items = [
  {
    "title": "A space to create",
    "description": "Bring your next idea to life.",
    "imageSrc": "/showcase-images/green-hero.svg"
  },
  {
    "title": "Made for teamwork",
    "description": "Keep everyone moving together.",
    "imageSrc": "/showcase-images/blue-mountain.svg"
  },
  {
    "title": "Room to grow",
    "description": "Build something that matters.",
    "imageSrc": "/showcase-images/violet-circle.svg"
  }
]
  view {
    <Carousel
      items="{items}"
      showPagination="true"
      isDraggable="true"
      showCounter="true"
      ariaLabel="Product highlights"
    />
  }
}
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
framedbooleanfalseNo
variantstring"default"No
classstring""No
} }