# Carousel 走马灯
在有限空间内,循环播放同一类型的图片、文字等内容
# 基础用法
适用广泛的基础用法
:::demo 结合使用el-carousel
和el-carousel-item
标签就得到了一个走马灯。幻灯片的内容是任意的,需要放在el-carousel-item
标签中。默认情况下,在鼠标 hover 底部的指示器时就会触发切换。通过设置trigger
属性为click
,可以达到点击触发的效果。
默认 Hover 指示器触发
# 指示器
可以将指示器的显示位置设置在容器外部
indicator-position
属性定义了指示器的位置。默认情况下,它会显示在走马灯内部,设置为outside
则会显示在外部;设置为none
则不会显示指示器。
# 切换箭头
可以设置切换箭头的显示时机
arrow
属性定义了切换箭头的显示时机。默认情况下,切换箭头只有在鼠标 hover 到走马灯上时才会显示;若将arrow
设置为always
,则会一直显示;设置为never
,则会一直隐藏。
# 卡片化
当页面宽度方向空间空余,但高度方向空间匮乏时,可使用卡片风格
将type
属性设置为card
即可启用卡片模式。从交互上来说,卡片模式和一般模式的最大区别在于,可以通过直接点击两侧的幻灯片进行切换。
← Card 卡片 Collapse 折叠面板 →