- 基于 Vue3.0 + ts 开发
- 轻量、简易,支持无缝轮播
npm i vue3-easy-swiper --save
![with title](https://camo.githubusercontent.com/66072836de0b6f99b115c957e3b28baa8564d49f7daab72110006631ee3f3df0/68747470733a2f2f79657a6970692e6f73732d636e2d6265696a696e672e616c6979756e63732e636f6d2f323032322d30312d32335f31312d32302d34362e676966)
import { Vue3EasySwiper } from 'vue3-easy-swiper'
import 'vue3-easy-swiper/dist/style'
// url and title must is required
const list = [
{
url: 'http://pic1.win4000.com/wallpaper/3/57ac4130c083a_270_185.jpg',
title: '标题1'
},
{
url: 'http://pic1.win4000.com/wallpaper/5/577e17894c4c7_270_185.jpg',
title: '标题2'
},
]
<vue3-easy-swiper :list="list" style="width: 500px;height:300px">
<template #swiperItem="{ item }">
<img :src="item.url" style="width: 100%;height: 100%;" />
</template>
</vue3-easy-swiper>
import { createApp } from 'vue'
import App from '../examples/App.vue'
import Vue3EasySwiper from 'vue3-easy-swiper'
import 'vue3-easy-swiper/dist/style.css'
const app = createApp(App)
app.use(Vue3EasySwiper)
app.mount('#app')
属性 |
说明 |
默认 |
list |
数组,格式: [{ url: 'xxx', title: 'xxx' }] |
[] |
autoplay |
是否自动轮播 |
true |
interval |
每两次隔多久滚动一次 |
3000 |
duration |
每次滚动一页需要多久时间 |
300 |
showDots |
是否显示轮播的那个点 |
true |
showTitle |
是否显示底部标题 |
true |
showArrow |
是否显示轮播左右箭头 |
true |
direction |
滚动方向, prev:往右滚动,next:往左滚动 |
next |
事件名称 |
说明 |
返回值 |
change |
滚动完成后的回调 |
当前索引index |
click |
每个轮播图上的点击事件 |
当前点击项 |
插槽名称 |
说明 |
返回值 |
swiperItem |
在每一项里面的内容 |
返回item |
swiperCustomButton |
自定义按钮,会覆盖默认按钮,也可以说是循环内容之外的额外内容 |
无 |
swiperLeftButton |
左边自定义按钮 |
无 |
swiperRightButton |
右边自定义按钮 |
无 |