Carousel

Loop a series of images or texts in a limited space

Basic usage

Add motion blur to infuse dynamism and smoothness into the carousel.

Indicators can be displayed outside the carousel

You can define when arrows are displayed

When the height of carousel is set to auto, the carousel height will be automatically set according to the height of the carousel item

When a page is wide enough but has limited height, you can activate card mode for carousels

By default, direction is horizontal. Let carousel be displayed in the vertical direction by setting direction to vertical.

Name	Description	Type	Default
height	height of the carousel	`string`	''
initial-index	index of the initially active slide (starting from 0)	`number`	0
trigger	how indicators are triggered	`enum`	hover
autoplay	whether automatically loop the slides	`boolean`	true
interval	interval of the auto loop, in milliseconds	`number`	3000
indicator-position	position of the indicators	`enum`	''
arrow	when arrows are shown	`enum`	hover
type	type of the Carousel	`enum`	''
cardScale 2.7.8	when type is card, scaled size of secondary cards	`number`	0.83
loop	display the items in loop	`boolean`	true
direction	display direction	`enum`	horizontal
pause-on-hover	pause autoplay when hover	`boolean`	true
motion-blur 2.6.0	infuse dynamism and smoothness into the carousel	`boolean`	false

Name	Description	Type
change	triggers when the active slide switches, it has two parameters, the one is the index of the new active slide, and other is index of the old active slide	`Function`

Name	Description	Subtags
default	customize default content	Carousel-Item

Method	Description	Type
activeIndex 2.7.8	active slide index	`number`
setActiveItem	manually switch slide, index of the slide to be switched to, starting from 0; or the `name` of corresponding `el-carousel-item`	`Function`
prev	switch to the previous slide	`Function`
next	switch to the next slide	`Function`