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	Accepted Values	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	string	hover/click	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	string	outside/none	—
arrow	when arrows are shown	string	always/hover/never	hover
type	type of the Carousel	string	card	—
loop	display the items in loop	boolean	-	true
direction	display direction	string	horizontal/vertical	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	Parameters
change	triggers when the active slide switches	index of the new active slide, index of the old active slide

Method	Description	Parameters
setActiveItem	manually switch slide	index of the slide to be switched to, starting from 0; or the `name` of corresponding `el-carousel-item`
prev	switch to the previous slide	—
next	switch to the next slide	—