Carousel

Loop a series of images or texts in a limited space

Basic usage

Motion blur 2.6.0

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

Indicators

Indicators can be displayed outside the carousel

Arrows

You can define when arrows are displayed

Auto height

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

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.

NameDescriptionTypeAccepted 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
motion-blur 2.6.0infuse dynamism and smoothness into the carouselboolean-false
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
NameDescriptionTypeAccepted ValuesDefault
namename of the item, can be used in setActiveItemstring
labeltext content for the corresponding indicatorstring
NameDescription
customize default content

Source

ComponentDocs

Contributors