Note

This documentation describes the Carousel Vue component for native UI views for Xml templates see carousel.

Carousel

Displays a collection of items in a paginated, optionally auto-scrolling carousel. Wraps PrimeVue Carousel.

Import

import { Carousel } from '@neos/design-system'

Props

Prop	Type	Default	Description
source	unknown[]	—	Required. Array of items to display
pageSize	number	1	Number of items visible per page
scrollStep	number	1	Number of items to scroll per navigation step
autoScrollInterval	number	0	Auto-scroll interval in milliseconds. 0 disables auto-scroll
circular	boolean	undefined	Enable circular navigation (wraps around)
navigationArrows	boolean	true	Show previous/next arrow buttons
paginationIndicators	boolean	true	Show pagination dot indicators

Slots

Slot	Scope	Description
item	{ context: item }	Template for each carousel item

Usage Examples

Simple image carousel

<Carousel :source="images" :page-size="1" :circular="true">
  <template #item="{ context }">
    <img :src="context.url" :alt="context.caption" style="width: 100%" />
  </template>
</Carousel>

Multi-item card carousel

<Carousel :source="products" :page-size="3" :scroll-step="1">
  <template #item="{ context }">
    <Card>
      <Heading :level="4">{{ context.name }}</Heading>
      <Text>{{ context.price }}</Text>
    </Card>
  </template>
</Carousel>

Auto-scrolling with circular mode

<Carousel
  :source="announcements"
  :auto-scroll-interval="4000"
  :circular="true"
  :navigation-arrows="false"
>
  <template #item="{ context }">
    <Message severity="info">{{ context.text }}</Message>
  </template>
</Carousel>