Carousel

Carousel showcases content in a beautiful, scrollable container. It supports horizontal and vertical layouts, and customizable scroll snapping.

Components

The Carousel components include the following:

Carousel - Part of the Carousel family.
CarouselItem - Part of the Carousel family.

Carousel

The main wrapper for carousel content. Customize its appearance and scroll behavior with props for snapping and orientation. Use with CarouselItem for best results.

Carousel Props	Type	Description
snapTo	string	Sets the scroll snap alignment. Options: `center`, `end`. Default is `start`.
center	boolean	Shortcut for `snapTo="center"`.
end	boolean	Shortcut for `snapTo="end"`.
orientation	string	Sets the orientation of the carousel. Options: `horizontal`, `vertical`. If set, overrides the default layout direction. If both `vertical` and `horizontal` are false/undefined, defaults to horizontal.
vertical	boolean	Gives the carousel a vertical layout. Equivalent to `orientation="vertical"`. If both `vertical` and `horizontal` are set, `vertical` takes precedence.
horizontal	boolean	Gives the carousel a horizontal layout. Equivalent to `orientation="horizontal"`. If both `vertical` and `horizontal` are set, `vertical` takes precedence.

Carousel Props

Type

Description

snapTo

string

Sets the scroll snap alignment. Options: center, end. Default is start.

center

boolean

Shortcut for snapTo="center".

end

boolean

Shortcut for snapTo="end".

orientation

string

Sets the orientation of the carousel. Options: horizontal, vertical. If set, overrides the default layout direction. If both vertical and horizontal are false/undefined, defaults to horizontal.

vertical

boolean

Gives the carousel a vertical layout. Equivalent to orientation="vertical". If both vertical and horizontal are set, vertical takes precedence.

horizontal

boolean

Gives the carousel a horizontal layout. Equivalent to orientation="horizontal". If both vertical and horizontal are set, vertical takes precedence.

Carousel Slots	Description
default	The default slot. Place CarouselItem components or other content here.

Carousel Slots

Description

default

The default slot. Place CarouselItem components or other content here.

CarouselItem

The item wrapper for Carousel. Use to wrap images or other content. Must be a direct child of Carousel.

CarouselItem Slots	Description
default	The default slot. Content to be displayed inside the carousel item.

CarouselItem Slots

Description

default

The default slot. Content to be displayed inside the carousel item.

Examples

Snap To Center

Demonstrates the snapTo="center" prop, which aligns carousel items to the center when scrolling.

Code Example

SnapToCenter.vue

Snap To End

Demonstrates the snapTo="end" prop, which aligns carousel items to the end when scrolling.

Code Example

SnapToEnd.vue

Vertical

Shows the carousel in a vertical orientation using the vertical prop.

Code Example

Vertical.vue