VCarousel API

Props

name	type	default
`color`	string	undefined
Applies a color to the navigation dots - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`continuous`	boolean	true
Determines whether carousel is continuous.
`crossfade` New in v3.10.0	boolean	false
Enables crossfade transition.
`cycle`	boolean	false
Determines if the carousel should cycle through images.
`delimiter-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$delimiter'
Sets icon for carousel delimiter.
`direction`	'vertical' \| 'horizontal'	'horizontal'
The transition direction when changing windows.
`disabled`	boolean	false
Removes the ability to click or target the component.
`height`	string \| number	500
Sets the height for the component.
`hide-delimiter-background`	boolean	false
Hides the bottom delimiter background.
`hide-delimiters`	boolean	false
Hides the carousel’s bottom delimiters.
`interval`	string \| number	6000
The duration between image cycles. Requires the cycle prop.
`mandatory`	boolean \| 'force'	'force'
Forces at least one item to always be selected (if available).
`model-value`	unknown	undefined
The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
`next-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$next'
The displayed icon for forcing pagination to the next item.
`prev-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$prev'
The displayed icon for forcing pagination to the previous item.
`progress`	string \| boolean	false
Displays a carousel progress bar. Requires the cycle prop and interval.
`reverse`	boolean	false
Reverse the normal transition direction.
`selected-class`	string	'v-window-item--active'
Configure the active CSS class applied when an item is selected.
`show-arrows`	string \| boolean	true
Displays arrows for next/previous navigation.
`tag`	string \| (new () => any) \| FunctionalComponent	'div'
Specify a custom tag used on the root element.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`touch`	boolean \| TouchHandlers	undefined
Provide a custom left and right function when swiped left or right.
`transition-duration` New in v3.10.0	number	undefined
Overrides transition duration. Does not work in firefox, safari <18, or with `prefers-reduced-motion: reduce`.
`vertical-arrows`	boolean \| 'left' \| 'right'	false
Displays the navigation arrows vertically instead of horizontally.
`vertical-delimiters`	boolean \| 'left' \| 'right'	false
Displays carousel delimiters vertically.

Events

name	type
`update:modelValue`	[unknown]
Event that is emitted when the component’s model changes.

Slots

{
  group: {
    register: (
      item: {
        id: string
        value: Ref<unknown, unknown>
        disabled: Ref<boolean | undefined, boolean | undefined>
        useIndexAsValue: boolean
      },
      cmp: ComponentInternalInstance,
    ) => void
    unregister: (id: string) => void
    select: (id: string, value: boolean) => void
    selected: Ref<readonly string[], readonly string[]>
    isSelected: (id: string) => boolean
    prev: () => void
    next: () => void
    selectedClass: Ref<string | undefined, string | undefined>
    items: Readonly<
      Ref<
        { id: string; value: unknown; disabled: boolean | undefined }[],
        { id: string; value: unknown; disabled: boolean | undefined }[]
      >
    >
    disabled: Ref<boolean | undefined, boolean | undefined>
    getItemIndex: (value: unknown) => number
  }
}

{
  props: Record<string, any>
  item: { id: string; value: unknown; disabled: boolean }
}

{
  props: {
    icon:
      | string
      | (string | [string, number])[]
      | (new () => any)
      | FunctionalComponent
    class: string
    onClick: () => void
    'aria-label': string
  }
}

{
  props: {
    icon:
      | string
      | (string | [string, number])[]
      | (new () => any)
      | FunctionalComponent
    class: string
    onClick: () => void
    'aria-label': string
  }
}

`default`
The default Vue slot.
`item`
Define a custom item appearance.
`next`
Slot displaying the arrow switching to the next item.
`prev`
Slot displaying the arrow switching to the previous item.

SASS Variables

name	default
`$carousel-controls-bg`	tools.theme-color('surface-variant', .3)
`$carousel-controls-color`	rgb(var(--v-theme-on-surface-variant))
`$carousel-controls-size`	50px
`$carousel-controls-theme`	( $carousel-controls-bg, $carousel-controls-color )
`$carousel-dot-active-opacity`	1
`$carousel-dot-hover-opacity`	.8
`$carousel-dot-inactive-opacity`	.5
`$carousel-dot-margin`	0 8px

#VCarousel API

VCarousel API