// 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 = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"label\": \"First slide\",\n \"title\": \"First slide\",\n \"description\": \"Introduce the collection with a concise, focused message.\"\n },\n {\n \"label\": \"Second slide\",\n \"title\": \"Second slide\",\n \"description\": \"Move through content using buttons, pagination, keyboard, or touch.\"\n },\n {\n \"label\": \"Third slide\",\n \"title\": \"Third slide\",\n \"description\": \"Every interaction exposes useful public lifecycle and navigation events.\"\n },\n {\n \"label\": \"Fourth slide\",\n \"title\": \"Fourth slide\",\n \"description\": \"Flexible for larger collections.\"\n },\n {\n \"label\": \"Fifth slide\",\n \"title\": \"Fifth slide\",\n \"description\": \"Responsive at every viewport.\"\n },\n {\n \"label\": \"Sixth slide\",\n \"title\": \"Sixth slide\",\n \"description\": \"Built with accessible semantics.\"\n }\n]" state playground_activeIndex = ctx.url.searchParams.get("pg_activeIndex") ?? "0" state playground_slidesPerView = 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") ?? "false" state playground_isAutoPlay = ctx.url.searchParams.get("pg_isAutoPlay") ?? "false" state playground_autoplayInterval = ctx.url.searchParams.get("pg_autoplayInterval") ?? "4000" state playground_isInfiniteLoop = ctx.url.searchParams.get("pg_isInfiniteLoop") ?? "false" state playground_isRTL = ctx.url.searchParams.get("pg_isRTL") ?? "false" state playground_isCentered = ctx.url.searchParams.get("pg_isCentered") ?? "false" state playground_isDraggable = ctx.url.searchParams.get("pg_isDraggable") ?? "false" state playground_isAutoHeight = ctx.url.searchParams.get("pg_isAutoHeight") ?? "false" state playground_isSnap = ctx.url.searchParams.get("pg_isSnap") ?? "false" state playground_showCounter = ctx.url.searchParams.get("pg_showCounter") ?? "false" state playground_thumbnails = ctx.url.searchParams.get("pg_thumbnails") ?? "none" state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Basic usage" 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.

22 props1 slots10 eventsTheme readyResponsive
Interactive playground

Configure Carousel

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

Live preview
Component code
<Carousel
  items='[
    {
      "label": "First slide",
      "title": "First slide",
      "description": "Introduce the collection with a concise, focused message."
    },
    {
      "label": "Second slide",
      "title": "Second slide",
      "description": "Move through content using buttons, pagination, keyboard, or touch."
    },
    {
      "label": "Third slide",
      "title": "Third slide",
      "description": "Every interaction exposes useful public lifecycle and navigation events."
    },
    {
      "label": "Fourth slide",
      "title": "Fourth slide",
      "description": "Flexible for larger collections."
    },
    {
      "label": "Fifth slide",
      "title": "Fifth slide",
      "description": "Responsive at every viewport."
    },
    {
      "label": "Sixth slide",
      "title": "Sixth slide",
      "description": "Built with accessible semantics."
    }
  ]'
  ariaLabel="Basic usage"
/>
Component props22 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Basic usage

Basic usage

Cycle through images or content slides with accessible previous and next controls.

01
Live preview
Component usage.wrn
<Carousel
  items='[
    {
      "label": "First slide",
      "title": "First slide",
      "description": "Introduce the collection with a concise, focused message."
    },
    {
      "label": "Second slide",
      "title": "Second slide",
      "description": "Move through content using buttons, pagination, keyboard, or touch."
    },
    {
      "label": "Third slide",
      "title": "Third slide",
      "description": "Every interaction exposes useful public lifecycle and navigation events."
    },
    {
      "label": "Fourth slide",
      "title": "Fourth slide",
      "description": "Flexible for larger collections."
    },
    {
      "label": "Fifth slide",
      "title": "Fifth slide",
      "description": "Responsive at every viewport."
    },
    {
      "label": "Sixth slide",
      "title": "Sixth slide",
      "description": "Built with accessible semantics."
    }
  ]'
  ariaLabel="Basic usage"
/>
Navigation

Pagination

Show the current slide and let users jump directly to any slide.

02
Live preview
Component usage.wrn
<Carousel
  items='[
    {
      "label": "First slide",
      "title": "First slide",
      "description": "Introduce the collection with a concise, focused message."
    },
    {
      "label": "Second slide",
      "title": "Second slide",
      "description": "Move through content using buttons, pagination, keyboard, or touch."
    },
    {
      "label": "Third slide",
      "title": "Third slide",
      "description": "Every interaction exposes useful public lifecycle and navigation events."
    },
    {
      "label": "Fourth slide",
      "title": "Fourth slide",
      "description": "Flexible for larger collections."
    },
    {
      "label": "Fifth slide",
      "title": "Fifth slide",
      "description": "Responsive at every viewport."
    },
    {
      "label": "Sixth slide",
      "title": "Sixth slide",
      "description": "Built with accessible semantics."
    }
  ]'
  showPagination="true"
  ariaLabel="Pagination"
/>
Playback

Autoplay

Advance automatically, pausing while users hover or interact with the carousel.

03
Live preview
Component usage.wrn
<Carousel
  items='[
    {
      "label": "First slide",
      "title": "First slide",
      "description": "Introduce the collection with a concise, focused message."
    },
    {
      "label": "Second slide",
      "title": "Second slide",
      "description": "Move through content using buttons, pagination, keyboard, or touch."
    },
    {
      "label": "Third slide",
      "title": "Third slide",
      "description": "Every interaction exposes useful public lifecycle and navigation events."
    },
    {
      "label": "Fourth slide",
      "title": "Fourth slide",
      "description": "Flexible for larger collections."
    },
    {
      "label": "Fifth slide",
      "title": "Fifth slide",
      "description": "Responsive at every viewport."
    },
    {
      "label": "Sixth slide",
      "title": "Sixth slide",
      "description": "Built with accessible semantics."
    }
  ]'
  showPagination="true"
  isAutoPlay="true"
  autoplayInterval="2500"
  ariaLabel="Autoplay"
/>
Playback

Infinite loop

Continue from the last slide back to the first without disabling controls.

04
Live preview
Component usage.wrn
<Carousel
  items='[
    {
      "label": "First slide",
      "title": "First slide",
      "description": "Introduce the collection with a concise, focused message."
    },
    {
      "label": "Second slide",
      "title": "Second slide",
      "description": "Move through content using buttons, pagination, keyboard, or touch."
    },
    {
      "label": "Third slide",
      "title": "Third slide",
      "description": "Every interaction exposes useful public lifecycle and navigation events."
    },
    {
      "label": "Fourth slide",
      "title": "Fourth slide",
      "description": "Flexible for larger collections."
    },
    {
      "label": "Fifth slide",
      "title": "Fifth slide",
      "description": "Responsive at every viewport."
    },
    {
      "label": "Sixth slide",
      "title": "Sixth slide",
      "description": "Built with accessible semantics."
    }
  ]'
  showPagination="true"
  isInfiniteLoop="true"
  ariaLabel="Infinite loop"
/>
Direction

RTL

Reverse movement and controls for right-to-left interfaces.

05
Live preview
Component usage.wrn
<Carousel
  items='[
    {
      "label": "First slide",
      "title": "First slide",
      "description": "Introduce the collection with a concise, focused message."
    },
    {
      "label": "Second slide",
      "title": "Second slide",
      "description": "Move through content using buttons, pagination, keyboard, or touch."
    },
    {
      "label": "Third slide",
      "title": "Third slide",
      "description": "Every interaction exposes useful public lifecycle and navigation events."
    },
    {
      "label": "Fourth slide",
      "title": "Fourth slide",
      "description": "Flexible for larger collections."
    },
    {
      "label": "Fifth slide",
      "title": "Fifth slide",
      "description": "Responsive at every viewport."
    },
    {
      "label": "Sixth slide",
      "title": "Sixth slide",
      "description": "Built with accessible semantics."
    }
  ]'
  activeIndex="1"
  showPagination="true"
  isRTL="true"
  ariaLabel="RTL"
/>
Layout

Multiple slides

Keep several slides visible at once for products, articles, or media collections.

06
Live preview
Component usage.wrn
<Carousel
  items='[
    {
      "label": "First slide",
      "title": "First slide",
      "description": "Introduce the collection with a concise, focused message."
    },
    {
      "label": "Second slide",
      "title": "Second slide",
      "description": "Move through content using buttons, pagination, keyboard, or touch."
    },
    {
      "label": "Third slide",
      "title": "Third slide",
      "description": "Every interaction exposes useful public lifecycle and navigation events."
    },
    {
      "label": "Fourth slide",
      "title": "Fourth slide",
      "description": "Flexible for larger collections."
    },
    {
      "label": "Fifth slide",
      "title": "Fifth slide",
      "description": "Responsive at every viewport."
    },
    {
      "label": "Sixth slide",
      "title": "Sixth slide",
      "description": "Built with accessible semantics."
    }
  ]'
  activeIndex="3"
  slidesPerView="3"
  showPagination="true"
  ariaLabel="Multiple slides"
/>
Layout

Centered

Keep a compact active slide centered while adjacent content remains visible.

07
Live preview
Component usage.wrn
<Carousel
  items='[
    {
      "label": "First slide",
      "title": "First slide",
      "description": "Introduce the collection with a concise, focused message."
    },
    {
      "label": "Second slide",
      "title": "Second slide",
      "description": "Move through content using buttons, pagination, keyboard, or touch."
    },
    {
      "label": "Third slide",
      "title": "Third slide",
      "description": "Every interaction exposes useful public lifecycle and navigation events."
    },
    {
      "label": "Fourth slide",
      "title": "Fourth slide",
      "description": "Flexible for larger collections."
    },
    {
      "label": "Fifth slide",
      "title": "Fifth slide",
      "description": "Responsive at every viewport."
    },
    {
      "label": "Sixth slide",
      "title": "Sixth slide",
      "description": "Built with accessible semantics."
    }
  ]'
  slidesPerView="2"
  showPagination="true"
  isCentered="true"
  ariaLabel="Centered"
/>
Pointer interaction

Draggable

Drag or swipe slides with a pointer while preserving keyboard controls.

08
Live preview
Component usage.wrn
<Carousel
  items='[
    {
      "label": "First slide",
      "title": "First slide",
      "description": "Introduce the collection with a concise, focused message."
    },
    {
      "label": "Second slide",
      "title": "Second slide",
      "description": "Move through content using buttons, pagination, keyboard, or touch."
    },
    {
      "label": "Third slide",
      "title": "Third slide",
      "description": "Every interaction exposes useful public lifecycle and navigation events."
    },
    {
      "label": "Fourth slide",
      "title": "Fourth slide",
      "description": "Flexible for larger collections."
    },
    {
      "label": "Fifth slide",
      "title": "Fifth slide",
      "description": "Responsive at every viewport."
    },
    {
      "label": "Sixth slide",
      "title": "Sixth slide",
      "description": "Built with accessible semantics."
    }
  ]'
  activeIndex="1"
  slidesPerView="3"
  showPagination="true"
  isDraggable="true"
  ariaLabel="Draggable"
/>
Layout

Auto height

Let each slide determine the carousel height for variable-length content.

09
Live preview
Component usage.wrn
<Carousel
  items='[
    {
      "label": "First slide",
      "title": "First slide",
      "description": "Introduce the collection with a concise, focused message."
    },
    {
      "label": "Second slide",
      "title": "Second slide",
      "description": "Move through content using buttons, pagination, keyboard, or touch."
    },
    {
      "label": "Third slide",
      "title": "Third slide",
      "description": "Every interaction exposes useful public lifecycle and navigation events."
    },
    {
      "label": "Fourth slide",
      "title": "Fourth slide",
      "description": "Flexible for larger collections."
    },
    {
      "label": "Fifth slide",
      "title": "Fifth slide",
      "description": "Responsive at every viewport."
    },
    {
      "label": "Sixth slide",
      "title": "Sixth slide",
      "description": "Built with accessible semantics."
    }
  ]'
  showPagination="true"
  isAutoHeight="true"
  ariaLabel="Auto height"
/>
Scrolling

Snap scrolling

Use native horizontal scrolling with mandatory centered snap points.

010
Live preview
Component usage.wrn
<Carousel
  items='[
    {
      "label": "First slide",
      "title": "First slide",
      "description": "Introduce the collection with a concise, focused message."
    },
    {
      "label": "Second slide",
      "title": "Second slide",
      "description": "Move through content using buttons, pagination, keyboard, or touch."
    },
    {
      "label": "Third slide",
      "title": "Third slide",
      "description": "Every interaction exposes useful public lifecycle and navigation events."
    },
    {
      "label": "Fourth slide",
      "title": "Fourth slide",
      "description": "Flexible for larger collections."
    },
    {
      "label": "Fifth slide",
      "title": "Fifth slide",
      "description": "Responsive at every viewport."
    },
    {
      "label": "Sixth slide",
      "title": "Sixth slide",
      "description": "Built with accessible semantics."
    }
  ]'
  slidesPerView="2"
  showPagination="true"
  isSnap="true"
  ariaLabel="Snap scrolling"
/>
Status

Slide counter

Announce and display the current position and total slide count.

011
Live preview
Component usage.wrn
<Carousel
  items='[
    {
      "label": "First slide",
      "title": "First slide",
      "description": "Introduce the collection with a concise, focused message."
    },
    {
      "label": "Second slide",
      "title": "Second slide",
      "description": "Move through content using buttons, pagination, keyboard, or touch."
    },
    {
      "label": "Third slide",
      "title": "Third slide",
      "description": "Every interaction exposes useful public lifecycle and navigation events."
    },
    {
      "label": "Fourth slide",
      "title": "Fourth slide",
      "description": "Flexible for larger collections."
    },
    {
      "label": "Fifth slide",
      "title": "Fifth slide",
      "description": "Responsive at every viewport."
    },
    {
      "label": "Sixth slide",
      "title": "Sixth slide",
      "description": "Built with accessible semantics."
    }
  ]'
  showCounter="true"
  ariaLabel="Slide counter"
/>
Thumbnails

Thumbnails (horizontal)

Use a horizontal thumbnail rail as an alternate set of slide controls.

012
Live preview
Component usage.wrn
<Carousel
  items='[
    {
      "label": "First slide",
      "title": "First slide",
      "description": "Introduce the collection with a concise, focused message."
    },
    {
      "label": "Second slide",
      "title": "Second slide",
      "description": "Move through content using buttons, pagination, keyboard, or touch."
    },
    {
      "label": "Third slide",
      "title": "Third slide",
      "description": "Every interaction exposes useful public lifecycle and navigation events."
    },
    {
      "label": "Fourth slide",
      "title": "Fourth slide",
      "description": "Flexible for larger collections."
    },
    {
      "label": "Fifth slide",
      "title": "Fifth slide",
      "description": "Responsive at every viewport."
    },
    {
      "label": "Sixth slide",
      "title": "Sixth slide",
      "description": "Built with accessible semantics."
    }
  ]'
  thumbnails="horizontal"
  ariaLabel="Thumbnails (horizontal)"
/>
Thumbnails

Thumbnails (vertical)

Place thumbnail navigation beside the carousel on layouts with more room.

013
Live preview
Component usage.wrn
<Carousel
  items='[
    {
      "label": "First slide",
      "title": "First slide",
      "description": "Introduce the collection with a concise, focused message."
    },
    {
      "label": "Second slide",
      "title": "Second slide",
      "description": "Move through content using buttons, pagination, keyboard, or touch."
    },
    {
      "label": "Third slide",
      "title": "Third slide",
      "description": "Every interaction exposes useful public lifecycle and navigation events."
    },
    {
      "label": "Fourth slide",
      "title": "Fourth slide",
      "description": "Flexible for larger collections."
    },
    {
      "label": "Fifth slide",
      "title": "Fifth slide",
      "description": "Responsive at every viewport."
    },
    {
      "label": "Sixth slide",
      "title": "Sixth slide",
      "description": "Built with accessible semantics."
    }
  ]'
  thumbnails="vertical"
  ariaLabel="Thumbnails (vertical)"
/>
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

@initializeFires when the component emits the initialize event.
@changeFires when the component 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 reach Start event.
@reachEndFires when the component emits the reach End event.
@dragStartFires when the component emits the drag Start event.
@dragEndFires when the component emits the drag End event.
Event listener.js
const component = document.querySelector('[data-wrn-events]')

component.addEventListener('initialize', (event) => {
  console.log(event.detail)
})
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
itemsstring[]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
} }