首页 前端知识 vue element plus Carousel 走马灯

vue element plus Carousel 走马灯

2024-04-19 21:04:57 前端知识 前端哥 765 700 我要收藏

在有限空间内,循环播放同一类型的图片、文字等内容

基础用法#

结合使用 el-carousel 和 el-carousel-item 标签就得到了一个走马灯。 每一个页面的内容是完全可定制的,把你想要展示的内容放在 el-carousel-item 标签内。 默认情况下,在鼠标 hover 底部的指示器时就会触发切换。 通过设置 trigger 属性为 click,可以达到点击触发的效果。

Switch when indicator is hovered (default)

1

2

3

4

Switch when indicator is clicked

1

2

3

4

指示器#

可以将指示器的显示位置设置在容器外部

indicator-position 属性定义了指示器的位置。 默认情况下,它会显示在走马灯内部,设置为 outside 则会显示在外部;设置为 none 则不会显示指示器。

1

2

3

4

切换箭头#

可以设置切换箭头的显示时机

arrow 属性定义了切换箭头的显示时机。 默认情况下,切换箭头只有在鼠标 hover 到走马灯上时才会显示。 若将 arrow 设置为 always,则会一直显示;设置为 never,则会一直隐藏。

1

2

3

4

自动高度#

当 carousel <code>的<code> height 设置为 auto时, carousel 的高度将根据子内容的高度自动设置

each carousel-item has a different height

height 100px

height 200px

height 300px

卡片模式#

当页面宽度方向空间空余,但高度方向空间匮乏时,可使用卡片风格

将 type 属性设置为 card 即可启用卡片模式。 从交互上来说,卡片模式和一般模式的最大区别在于,卡片模式可以通过直接点击两侧的幻灯片进行切换。

1

2

3

4

5

6

垂直排列#

默认情况下,方向 direction 为 水平 horizontal。 通过设置 direction 为 vertical 来让走马灯在垂直方向上显示。

normal vertical layout

1

2

3

4

card vertical layout

1

2

3

4

属性名说明类型可选值默认值
heightcarousel 的高度string
initial-index初始状态激活的幻灯片的索引,从 0 开始number0
trigger指示器的触发方式stringhover/clickhover
autoplay是否自动切换booleantrue
interval自动切换的时间间隔,单位为毫秒number3000
indicator-position指示器的位置stringoutside/none
arrow切换箭头的显示时机stringalways/hover/neverhover
typecarousel 的类型stringcard
loop是否循环显示boolean-true
direction展示的方向stringhorizontal/verticalhorizontal
pause-on-hover鼠标悬浮时暂停自动切换boolean-true
事件名说明回调参数
change幻灯片切换时触发目前激活的幻灯片的索引,原幻灯片的索引
方法名说明参数
setActiveItem手动切换幻灯片需要切换的幻灯片的索引,从 0 开始;或相应 el-carousel-itemname 属性值
prev切换至上一张幻灯片
next切换至下一张幻灯片
插槽名说明子标签
-自定义默认内容Carousel-Item
属性名说明类型可选值默认值
name幻灯片的名字,可用作 setActiveItem 的参数string
label该幻灯片所对应指示器的文本string
插槽名说明
自定义默认内容

源代码#

组件 • 文档

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5265.html
标签
评论
发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

Python读写Json文件

2024-04-23 22:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!