Carousel

Move through a bounded or wrapping sequence of slides with direct controls.

Usage

Wrapping

Move from the last slide back to the first and from the first to the last.

FoundationDesign tokens

One source of truth for color, type, and spacing.

<!-- Carousel / Wrapping -->
<script setup lang="ts">
import { CarouselRoot, CarouselTrack, CarouselSlide, CarouselPrevious, CarouselNext, CarouselPause, CarouselIndicatorGroup, CarouselIndicator } from '@sectile/vue/carousel'
const slides = ['foundation', 'adapters', 'frameworks']

</script>

<template>
  <CarouselRoot :slides="slides" default-value="foundation">
    <CarouselTrack>
      <CarouselSlide v-for="slide in slides" :key="slide" :value="slide">
        {{ slide }}
      </CarouselSlide>
    </CarouselTrack>
    <CarouselPrevious>Previous</CarouselPrevious>
    <CarouselNext>Next</CarouselNext>
    <CarouselPause>Pause</CarouselPause>
    <CarouselIndicatorGroup>
      <CarouselIndicator v-for="slide in slides" :key="slide" :value="slide">
        {{ slide }}
      </CarouselIndicator>
    </CarouselIndicatorGroup>
  </CarouselRoot>
</template>

Bounded

Reject values outside the configured minimum and maximum.

FoundationDesign tokens

One source of truth for color, type, and spacing.

<!-- Carousel / Bounded -->
<script setup lang="ts">
import { CarouselRoot, CarouselTrack, CarouselSlide, CarouselPrevious, CarouselNext, CarouselPause, CarouselIndicatorGroup, CarouselIndicator } from '@sectile/vue/carousel'
const slides = ['foundation', 'adapters', 'frameworks']

</script>

<template>
  <CarouselRoot :slides="slides" default-value="foundation">
    <CarouselTrack>
      <CarouselSlide v-for="slide in slides" :key="slide" :value="slide">
        {{ slide }}
      </CarouselSlide>
    </CarouselTrack>
    <CarouselPrevious>Previous</CarouselPrevious>
    <CarouselNext>Next</CarouselNext>
    <CarouselPause>Pause</CarouselPause>
    <CarouselIndicatorGroup>
      <CarouselIndicator v-for="slide in slides" :key="slide" :value="slide">
        {{ slide }}
      </CarouselIndicator>
    </CarouselIndicatorGroup>
  </CarouselRoot>
</template>

Paused

Pause automatic carousel movement while keeping manual navigation available.

FoundationDesign tokens

One source of truth for color, type, and spacing.

<!-- Carousel / Paused -->
<script setup lang="ts">
import { CarouselRoot, CarouselTrack, CarouselSlide, CarouselPrevious, CarouselNext, CarouselPause, CarouselIndicatorGroup, CarouselIndicator } from '@sectile/vue/carousel'
const slides = ['foundation', 'adapters', 'frameworks']

</script>

<template>
  <CarouselRoot :slides="slides" default-value="foundation">
    <CarouselTrack>
      <CarouselSlide v-for="slide in slides" :key="slide" :value="slide">
        {{ slide }}
      </CarouselSlide>
    </CarouselTrack>
    <CarouselPrevious>Previous</CarouselPrevious>
    <CarouselNext>Next</CarouselNext>
    <CarouselPause>Pause</CarouselPause>
    <CarouselIndicatorGroup>
      <CarouselIndicator v-for="slide in slides" :key="slide" :value="slide">
        {{ slide }}
      </CarouselIndicator>
    </CarouselIndicatorGroup>
  </CarouselRoot>
</template>

Controlled

Let the parent own the current value and apply accepted changes back to the component.

FoundationDesign tokens

One source of truth for color, type, and spacing.

<!-- Carousel / Controlled -->
<script setup lang="ts">
import { CarouselRoot, CarouselTrack, CarouselSlide, CarouselPrevious, CarouselNext, CarouselPause, CarouselIndicatorGroup, CarouselIndicator } from '@sectile/vue/carousel'
const slides = ['foundation', 'adapters', 'frameworks']

</script>

<template>
  <CarouselRoot :slides="slides" default-value="foundation">
    <CarouselTrack>
      <CarouselSlide v-for="slide in slides" :key="slide" :value="slide">
        {{ slide }}
      </CarouselSlide>
    </CarouselTrack>
    <CarouselPrevious>Previous</CarouselPrevious>
    <CarouselNext>Next</CarouselNext>
    <CarouselPause>Pause</CarouselPause>
    <CarouselIndicatorGroup>
      <CarouselIndicator v-for="slide in slides" :key="slide" :value="slide">
        {{ slide }}
      </CarouselIndicator>
    </CarouselIndicatorGroup>
  </CarouselRoot>
</template>

API

Vue package: @sectile/vue/carousel

Components

CarouselRoot
CarouselViewport
CarouselTrack
CarouselIndicatorGroup
CarouselPrevious
CarouselNext
CarouselPause
CarouselSlide
CarouselIndicator

Props

`CarouselRootProps`

as: TypePrimitiveAsDefault'section'
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.
autoplay: Typeboolean | CarouselAutoplayOptionsDefaultfalse
Whether the carousel advances without direct input.
defaultPaused: TypebooleanDefaultfalse
Initial uncontrolled pause state.
defaultValue: Typestring | nullDefaultundefined
Initial value used when the component owns its state.
disabled: TypebooleanDefaultfalse
Whether interaction is unavailable.
getIndicatorLabel: Type(id: string, index: number, count: number) => stringDefaultundefined
Returns the accessible label announced for a carousel indicator.
getSlideLabel: Type(id: string, index: number, count: number) => stringDefaultundefined
Returns the accessible label announced for a carousel slide.
label: TypestringDefaultundefined
Accessible name announced for the control.
modelValue: Typestring | nullDefaultundefined
Current value when state is controlled by the parent.
orientation: Type'horizontal' | 'vertical'Default'horizontal'
Axis used for layout and keyboard movement.
paused: TypebooleanDefaultundefined
Controlled pause state.
policies: TypeCarouselPoliciesDefaultundefined
Behavior policies that customize validation, movement, or selection.
slides: Typereadonly string[]DefaultRequired
Ordered slide values managed by the carousel.

`CarouselPartProps`

as: TypePrimitiveAsDefaultVaries by part
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.

Slots

`CarouselRootSlotProps`

count: Typenumber
Number of values in the collection.
disabled: Typeboolean
Whether interaction is unavailable.
index: Typenumber | null
Zero-based position in the parent collection.
paused: Typeboolean
Whether automatic updates are paused.
value: Typestring | null
Current value exposed by this contract.

`CarouselSlideSlotProps`

active: Typeboolean
Whether this item is currently active.
count: Typenumber
Number of values in the collection.
disabled: Typeboolean
Whether interaction is unavailable.
index: Typenumber | null
Zero-based position in the parent collection.
paused: Typeboolean
Whether automatic updates are paused.
value: Typestring
Current value exposed by this contract.

Events

`CarouselRoot`

announce: Payloadstring
Emitted when assistive feedback should be announced.
update:modelValue: Payloadstring | null
Emitted when the component requests a new controlled value.
update:paused: Payloadboolean
Emitted when the component requests a new pause state.

Other types

`CarouselSlideLabelResolver`

type CarouselSlideLabelResolver = NonNullable<CarouselRootProps['getSlideLabel']>

`CarouselIndicatorLabelResolver`

type CarouselIndicatorLabelResolver = NonNullable<CarouselRootProps['getIndicatorLabel']>

`CarouselValueChangeHandler`

type CarouselValueChangeHandler = (value: string | null) => void

`CarouselPausedChangeHandler`

type CarouselPausedChangeHandler = (value: boolean) => void

`CarouselAnnounceHandler`

type CarouselAnnounceHandler = (value: string) => void

Parts

Shared scope: [data-scope="carousel"]. Combine it with a part selector to keep styles local to this component.

Part	Selector	Role	Extra attributes
`root`	`[data-part="root"]`	Defines the component boundary and owns its composed parts.	—
`viewport`	`[data-part="viewport"]`	Clips and positions the currently visible content.	—
`track`	`[data-part="track"]`	Defines the measurable path used by one or more thumbs.	—
`slide`	`[data-part="slide"]`	Represents one carousel page.	—
`previous`	`[data-part="previous"]`	Moves to the previous item or page.	—
`next`	`[data-part="next"]`	Moves to the next item or page.	—
`pause`	`[data-part="pause"]`	Pauses or resumes automatic movement.	—
`indicator-group`	`[data-part="indicator-group"]`	Groups direct position controls.	—
`indicator`	`[data-part="indicator"]`	Shows state or position without replacing the primary content.	—

Keyboard interaction

Key	Behavior
`Arrow Left` / `Arrow Right`	Move to the previous or next slide.
`Home` / `End`	Move to the first or last slide.
`Enter` / `Space`	Activate native previous, next, pause, or indicator controls.

Accessibility

Slides, navigation controls, pause control, and indicators remain individually named and operable.

See the corresponding WAI-ARIA pattern for the host accessibility contract.

Carousel ​

Usage ​

Wrapping ​

Bounded ​

Paused ​

Controlled ​

API ​

Props ​

CarouselRootProps ​

CarouselPartProps ​

Slots ​

CarouselRootSlotProps ​

CarouselSlideSlotProps ​

Events ​

CarouselRoot ​

Other types ​

CarouselSlideLabelResolver ​

CarouselIndicatorLabelResolver ​

CarouselValueChangeHandler ​

CarouselPausedChangeHandler ​

CarouselAnnounceHandler ​

Parts ​

Keyboard interaction ​

Accessibility ​

Carousel

Usage

Wrapping

Bounded

Paused

Controlled

API

Props

`CarouselRootProps`

`CarouselPartProps`

Slots

`CarouselRootSlotProps`

`CarouselSlideSlotProps`

Events

`CarouselRoot`

Other types

`CarouselSlideLabelResolver`

`CarouselIndicatorLabelResolver`

`CarouselValueChangeHandler`

`CarouselPausedChangeHandler`

`CarouselAnnounceHandler`

Parts

Keyboard interaction

Accessibility