1.0.2 • Published 5 years ago
vue3-swiper-nice v1.0.2
轮播图组件(待完善)
一个基于 vue 实现的移动端 h5 轮播图组件
参数列表(待完善)
Swiper:
options(Object): { on: { click : (e, swiper) => { // 监听鼠标单击事件接受两个参数(e: touch事件,swiper: Swiper实例) } } }
Swiper-slider:
- *slideId(Number): swiper 子项的 id (必选)
实现方式
<Swiper class="swiper">
<Swiper-slider :slideId="1" class="img1">轮播图1</Swiper-slider>
<Swiper-slider :slideId="2" class="img2">轮播图2</Swiper-slider>
<Swiper-slider :slideId="3" class="img3">轮播图3</Swiper-slider>
<Swiper-slider :slideId="4" class="img4">轮播图4</Swiper-slider>
<Swiper-slider :slideId="5" class="img5">轮播图5</Swiper-slider>
</Swiper>
import {Swiper, SwiperSlider} from 'vue3-swiper-nice';
Vue.use(Swiper).use(SwiperSlider);
事件(待完善)
- getId(): 获取当前轮播图id
- slideTo(index, speed,callback): 滑到指定index轮播图
- index: 轮播索引
- speed: 滑动速度(毫秒)
- callback:回调函数(可接受参数为 Swiper 实例)