最近搜索
vue3 轮播图片 走马灯 carousel
管理员
2025-02-11 12:26
这是基础用法，底部的导航，鼠标移入 直接切换。或者是鼠标点击切换
<template>
<div class="block text-center">
<span class="demonstration">
Switch when indicator is hovered (default)
</span>
<el-carousel height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3 class="small justify-center" text="2xl">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
<div class="block text-center" m="t-4">
<span class="demonstration">Switch when indicator is clicked</span>
<el-carousel trigger="click" height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3 class="small justify-center" text="2xl">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
</template>
<style scoped>
.demonstration {
color: var(--el-text-color-secondary);
}
.el-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
</style>左右移动的箭头一直存在。 always
<template> <el-carousel :interval="5000" arrow="always">
<el-carousel-item v-for="item in 4" :key="item"> <h3 text="2xl" justify="center">{{ item }}</h3>
</el-carousel-item> </el-carousel></template><style scoped>.el-carousel__item
h3 { color: #475669; opacity: 0.75; line-height: 300px; margin: 0; text-align: center;}.el-carousel__item:nth-child(2n) { background-color: #99a9bf;}.el-carousel__item:nth-child(2n + 1) { background-color: #d3dce6;}</style>Carousel API
Carousel Attributes
| 属性名 | 说明 | 类型 | Default |
|---|---|---|---|
| height | carousel 的高度 | string | '' |
| initial-index | 初始状态激活的幻灯片的索引，从 0 开始 | number | 0 |
| trigger | 指示器的触发方式 | enum | hover |
| autoplay | 是否自动切换 | boolean | true |
| interval | 自动切换的时间间隔，单位为毫秒 | number | 3000 |
| indicator-position | 指示器的位置 | enum | '' |
| arrow | 切换箭头的显示时机 | enum | hover |
| type | carousel 的类型 | enum | '' |
| cardScale 2.7.8 | 当 type 为 card时，二级卡的缩放大小 | number | 0.83 |
| loop | 是否循环显示 | boolean | true |
| direction | 展示的方向 | enum | horizontal |
| pause-on-hover | 鼠标悬浮时暂停自动切换 | boolean | true |
| motion-blur 2.6.0 | 添加动态模糊以给走马灯注入活力和流畅性。 | boolean | false |
Carousel Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | 当前展示的幻灯片切换时触发，它有两个参数， 一个是新幻灯片的索引，另一个是旧幻灯片的索引 | Function |
Carousel Slots
| 插槽名 | 说明 | 子标签 |
|---|---|---|
| default | 自定义默认内容 | Carousel-Item |
Carousel Exposes
| 方法名 | 说明 | 类型 |
|---|---|---|
| activeIndex 2.7.8 | 当前幻灯片的索引 | number |
| setActiveItem | 手动切换幻灯片，传入需要切换的幻灯片的索引，从 0 开始；或相应 el-carousel-item 的 name 属性值 | Function |
| prev | 切换至上一张幻灯片 | Function |
| next | 切换至下一张幻灯片 | Function |
Carousel-Item API
Carousel-Item Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| name | 幻灯片的名字，可用作 setActiveItem 的参数 | string | '' |
| label | 该幻灯片所对应指示器的文本 | string / number | '' |
Carousel-Item Slots
| 插槽名 | 说明 |
|---|---|
| default | 自定义默认内容 |
联系站长
站长微信:xiaomao0055
站长QQ:14496453
按分类分组
按日期分组