SuperAPI AI 工具集

el-carousel

前端与建站

查看项目

更新于 10-15 23:32

技能介绍

el-carousel 是 Element Plus 提供的轮播组件,用于在有限空间内循环展示一组图片或文字,支持多种展示模式。适用于图片轮播、内容轮播、旋转横幅和产品展示等场景。

基本用法:使用 <el-carousel> 包裹多个 <el-carousel-item>,通过 height 设置高度,例如 <el-carousel height="150px">。

主要能力:支持 motion-blur 运动模糊效果;indicator-position 控制指示器位置(''、'none'、'outside');arrow 控制箭头显示时机('always'、'hover'、'never');type="card" 卡片模式;direction="vertical" 垂直方向。

常用属性:height(高度,默认 '')、initial-index(初始索引,默认 0)、trigger(指示器触发方式 'hover'|'click',默认 'hover')、autoplay(是否自动循环,默认 true)、interval(自动循环间隔毫秒,默认 3000)、card-scale(卡片模式次级卡片缩放,默认 0.83)、loop(是否循环,默认 true)、pause-on-hover(悬停暂停,默认 true)、motion-blur(默认 false)。

事件:change 在活动幻灯片切换时触发,回调为 (current: number, prev: number) => void。

插槽:default 自定义默认内容,子标签为 Carousel-Item。

暴露方法:activeIndex(当前索引)、setActiveItem(index: string | number)、prev()、next()。

CarouselItem 属性:name(名称,默认 '')、label(对应指示器文字,string|number,默认 '')。

最佳实践:产品展示使用 type="card";设置 motion-blur 使过渡更平滑;使用 arrow="always" 提升可访问性。

限制:资料未提供安装命令、版本要求、收费信息及浏览器兼容性说明。