Evokerswiper
轮播容器，其中只可放置 swiper-item 组件。
Props
| 参数 | 类型 | 默认值 | 必填 | 说明 | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| indicator-dots | boolean | false | 否 | 是否显示面板指示器 | |||||||||||||
| indicator-color | color | rgba(0, 0, 0, .3) | 否 | 指示器颜色 | |||||||||||||
| indicator-active-color | color | #000 | 否 | 当前选中的指示器颜色 | |||||||||||||
| autoplay | boolean | false | 否 | 是否自动切换 | |||||||||||||
| current | number | 0 | 否 | 当前所在滑块的 index | |||||||||||||
| interval | number | 5000 | 否 | 自动切换时间间隔 | |||||||||||||
| duration | number | 500 | 否 | 滑动动画时长 | |||||||||||||
| circular | boolean | false | 否 | 是否采用衔接滑动 | |||||||||||||
| vertical | boolean | false | 否 | 滑动方向是否为纵向 | |||||||||||||
| previous-margin | string | "0px" | 否 | 前边距，可用于露出前一项的一小部分，接受 px | |||||||||||||
| next-margin | string | "0px" | 否 | 后边距，可用于露出后一项的一小部分，接受 px | |||||||||||||
| display-multiple-items | number | 1 | 否 | 同时显示的滑块数量 | |||||||||||||
| easing-function | string | default | 否 | 指定 swiper 切换缓动动画类型 | |||||||||||||
| |||||||||||||||||
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 每一页轮播结束后触发 | { current: number, source: 'autoplay' | 'touch' | '' } |
Example
vue
<template>
<swiper class="w-full h-40 text-white" autoplay indicator-dots indicator-active-color="white">
<swiper-item v-for="item of items" :key="item" :style="{ 'background-color': item }">
{{ item }}</swiper-item>
</swiper>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const items = ['blue', 'red', 'yellow', 'green']
</script>