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)
}