a simple vue swiper
step1:npm install step2:npm run dev
see demo
| params | description | default |
| direction | slide change direction | vertical|horizontal |
| paginationVisible | pagination display | false|true |
| loop | slide can loop | false|true |
| speed | slide transform time(ms) | 500 |
| performanceMode | slide can change by finger moving | false|true |
| autoPlay | slide loop auto play | false|true |
| initPage | init defalut page number | 1 |
| timing | slide transition-timing-function | ease|ease-in|ease-out|... |
| methods | description | param |
| next | go next page | -- |
| prev | go prev page | -- |
| setPage | go intent page | pageNumber |
| updateSlideBindEvent | if you have asy function to get slides data, you must rebinding and reinit. you still can income param pageNumber set the init page | pageNumber |
| events | description | callback params |
| slideChangeStart | start change slide callback | pageNumber,el |
| slideChangeEnd | change slide end callback | pageNumber,el |
| slideRevertStart | not change slide start callback | pageNumber,el |
| slideRevertEnd | not change slide end callback | pageNumber,el |
| slideMove | slide move callback | offset,el |
<simple-swiper direction="horizontal" :paginationVisible="true">
<div class="simple-swiper-silde"><span>page 1</span></div>
<div class="simple-swiper-silde"><span>page 2</span></div>
<div class="simple-swiper-silde"><span>page 3</span></div>
</simple-swiper>
<div class="title2">vertical</div>
<simple-swiper direction="vertical" :paginationVisible="false">
<div class="simple-swiper-silde blue"><span>page 1</span></div>
<div class="simple-swiper-silde red "><span>page 2</span></div>
<div class="simple-swiper-silde yellow"><span>page 3</span></div>
</simple-swiper>
<div class="title2">horizontal loop</div>
<simple-swiper direction="horizontal" :paginationVisible="true" :loop="true">
<div class="simple-swiper-silde blue"><span>page 1</span></div>
<div class="simple-swiper-silde red "><span>page 2</span></div>
<div class="simple-swiper-silde yellow"><span>page 3</span></div>
</simple-swiper>
<div class="title2">horizontal autoplay</div>
<simple-swiper direction="horizontal" :autoPlay="2000" >
<div class="simple-swiper-silde blue"><span>page 1</span></div>
<div class="simple-swiper-silde red "><span>page 2</span></div>
<div class="simple-swiper-silde yellow"><span>page 3</span></div>
</simple-swiper>
<div class="title2">asy data</div>
<simple-swiper direction="vertical" :autoPlay="3000" ref="asyDemo">
<div class="simple-swiper-silde" v-for="item in asyItems" :key="item.id">page{{item.name}}</div>
</simple-swiper>
mounted(){
setTimeout(()=>{
this.asyItems = [{'id':1,'name':1},{'id':2,'name':2},{'id':3,'name':3}]
this.$refs.asyDemo.updateSlidesBindEvent();
},300)
}
Thanks for your attention and if you have problems, you can give me issues ~
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent