Carousel

The carousel component is designed to showcase a large amount of visual content in a dynamic and engaging manner. It enables you to display images, videos, or other multimedia content in a rotating carousel format, allowing users to view multiple items in a slideshow-like fashion.

This component is particularly useful for creating interactive galleries, image sliders, or promotional banners within your application.

info

For more details about Vuetify’s usage of Carousel component, click Carousel page.
For more prop explanations, click Vuetify Carousel API page.

Props

Attribute	Description	Type	Default
class	Prop that determines the class to add to the Carousel.	string	undefined
continuous	Determines whether carousel is continuous.	Boolean	false
cycle	Determines if the carousel should cycle through images.	Boolean	false
dark	Applies the dark theme variant to the component.	Boolean	false
delimiterIcon	Sets icon for carousel delimiter.	string	'$delimiter'
hideDelimiterBackground	Hides the bottom delimiter background.	Boolean	false
hideDelimiters	Hides the carousel’s bottom delimiters.	Boolean	false
interval	The duration between image cycles. Requires the cycle prop.	number | string	6000
light	Applies the light theme variant to the component.	Boolean	false
mandotory		Boolean	true
max		number | string	undefined
multiple		Boolean	false
nextIcon	The displayed icon for forcing pagination to the next item.	boolean | string	$next
prevIcon	The displayed icon for forcing pagination to the previous item.	boolean | string	$prev
progress	Displays a carousel progress bar. Requires the cycle prop and interval.	boolean	false
progressColor	Applies specified color to progress bar.	string	undefined
reverse	Reverse the normal transition direction.	boolean	false
showArrows	Displays arrows for next/previous navigation.	boolean	true
showArrowsOnHover	Displays navigation arrows only when the carousel is hovered over.	boolean	false
tabIndex	It determines the order of switching from one component to another with the tab key.	string	undefined
touch	Provide a custom left and right function when swiped left or right.	object	undefined
touchless	Disable touch support.	boolean	false
value	The designated model value for the component.	any	undefined
vertical	Uses a vertical transition when changing windows.	boolean	false
verticalDelimiters	Displays carousel delimiters vertically.	string	undefined
visible	Visibility of Carousel component.	boolean	true

Events

Attribute	Description
change	Emitted when the component value is changed by user interaction

CarouselItem

The CarouselItem component is used as a child element within the Carousel component to represent individual items or slides within the carousel.

Props

Attribute	Description	Type	Default
activeClass	Configure the active CSS class applied when the link is active.	string	undefined
eager	Will force the components content to render on mounted. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.	boolean	true
disabled	Removes the ability to click or target the component.	boolean	false
append	Setting append prop always appends the relative path to the current path.	boolean	false
exact	Exactly match the link. Without this, ‘/’ will match every route.	boolean	false
href	Designates the component as anchor and applies the href attribute.	string	undefined
link	Designates that the component is a link. This is automatic when using the href or to prop.	boolean	false
replace	Setting replace prop will call router.replace() instead of router.push() when clicked, so the navigation will not leave a history record. You can find more information about the replace prop on the vue-router documentation.	boolean	false
target	Designates the target attribute. This should only be applied when using the href prop.	string	undefined
to	Denotes the target route of the link. You can find more information about the to prop on the vue-router documentation.	string	undefined
transition	The transition used when the component progressing through items.	string	undefined
value	The designated model value for the component.	any	undefined
visible	Visibility of CarouselItem component	boolean	true

Note

The default value of the eager prop of CarouselItem component is now set to true. However, if there is a large amount of data, the eager prop can be set to false. This can be useful for working with large datasets.

For Mobile Usage

In the web version, CarouselItem has a src prop, which is not used in mobile. Therefore, instead of using src prop in mobile, you must place a VImg component within a Row-Col structure to display images.

Samples Qjson

Carousel