Carousel

Loop a series of images or texts in a limited space

Basic usage

Indicators

Indicators can be displayed outside the carousel

Arrows

You can define when arrows are displayed

Card mode

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

Vertical

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

AttributeDescriptionTypeAccepted ValuesDefault
heightheight of the carouselstring
initial-indexindex of the initially active slide (starting from 0)number0
triggerhow indicators are triggeredstringhover/clickhover
autoplaywhether automatically loop the slidesbooleantrue
intervalinterval of the auto loop, in millisecondsnumber3000
indicator-positionposition of the indicatorsstringoutside/none
arrowwhen arrows are shownstringalways/hover/neverhover
typetype of the Carouselstringcard
loopdisplay the items in loopboolean-true
directiondisplay directionstringhorizontal/verticalhorizontal
pause-on-hoverpause autoplay when hoverboolean-true
Event NameDescriptionParameters
changetriggers when the active slide switchesindex of the new active slide, index of the old active slide
MethodDescriptionParameters
setActiveItemmanually switch slideindex of the slide to be switched to, starting from 0; or the name of corresponding el-carousel-item
prevswitch to the previous slide
nextswitch to the next slide
NameDescriptionSubtags
-customize default contentCarousel-Item
AttributeDescriptionTypeAccepted ValuesDefault
namename of the item, can be used in setActiveItemstring
labeltext content for the corresponding indicatorstring
NameDescription
customize default content

Source

ComponentDocs

Contributors