vue2-swiper

Default

This is the default usage

Demo：

Code:

      
<swiper>
  <div v-for="n in 3" class="random-bg">page {{n}}</div>
</swiper>
      
    

direction

The swipers Switching direction,default is 'horizontal'.

Demo：

Set direction to 'vertical'

Code：

      
<swiper direction="vertical">
  <div v-for="n in 3" class="random-bg">page {{n}}</div>
</swiper>
      
    

loop

Set true to enable the loop mode

Demo：

Code：

      
<swiper loop>
  <div v-for="n in 3" class="random-bg">page {{n}}</div>
</swiper>
      
    

autoplay

type: [Boolean,Number] . if set true , it default to 3000,the unit is ms

Demo：

Code：

      
<swiper loop :autoplay= 3000>
  <div v-for="n in 3" class="random-bg">page {{n}}</div>
</swiper>
      
    

paginationVisible & paginationClickable

Demo：

Set paginationVisible and paginationClickable to true

Code：

      
<swiper pagination-visible pagination-clickable>
  <div v-for="n in 3" class="random-bg">page {{n}}</div>
</swiper>
      
    

speed

swiper switching speed, type: Number

Demo：

Set speed 1500

Code：

      
<swiper pagination-visible pagination-clickable :speed=1500>
  <div v-for="n in 3" class="random-bg">page {{n}}</div>
</swiper>
      
    

mousewheel-control

Set true to enable the mousewheelControl mode

Demo：

Code：

      
<swiper mousewheel-control>
  <div v-for="n in 3" class="random-bg">page {{n}}</div>
</swiper>
      
    

performance-mode

if true, the swiper will not follow the move

Demo：

Code：

      
<swiper performance-mode>
  <div v-for="n in 3" class="random-bg">page {{n}}</div>
</swiper>
      
    

active-index

The active page when initializing

Demo：

:active-index=3

Code：

      
<swiper :active-index= 3>
  <div v-for="n in 3" class="random-bg">page {{n}}</div>
</swiper>
      
    

no-bounds

If you want the first page can not slide to left ,or the last page can not slide to right , you should set noBounds to true.

Demo：

Code：

      
<swiper no-bounds>
  <div v-for="n in 3" class="random-bg">page {{n}}</div>
</swiper>
      
    

forbidden-slide

If true, you will not change the swiper by slide

Demo：

Code：

      
<swiper pagination-visible pagination-clickable forbidden-slide>
  <div v-for="n in 3" class="random-bg">page {{n}}</div>
</swiper>
      
    

tab-mode & tab-mode-animation

The tabMode should be an Array, if you set tabMode , it will add a tabnav above the swiper-slider.For better effect , you should also set forbidden-slide to true. If you just use the tab as a nav, you can set tabModeAnimation to true.

Demo：

Code：

      
<swiper :tab-mode = "tabs" forbidden-slide>
  <div v-for="n in 3" class="random-bg">page {{n}}</div>
</swiper>
      
      
tabs: ['first','second','third']
      
    

Demo：

just use the tab as a nav

Code：

      
<swiper :tab-mode = "tabs" tab-mode-animation>
  <div v-for="n in 3" class="random-bg">page {{n}}</div>
</swiper>
      
      
tabs: ['first','second','third']
      
    

Demo：

Code：

      
<swiper :tab-mode = "tabs2" forbidden-slide>
  <div v-for="n in 3" class="random-bg">page {{n}}</div>
</swiper>
      
      
tabs2: ['A','B','C']
      
    

customize-nav & customize-nav-active-class

Demo：

CustomizeNav is a dom selector, you can place it anywhere you want. customizeNavActiveClass's default value is active. attention: you should set index attribute to nav-item! if you need a nav in the swiper, look at tabMode.

Code：

      
<div class="mynav"><!--you can place this anywhere you want-->
  <span index=1>first page</span>
  <span index=2>second page</span>
  <span index=3>third page</span>
</div>
<swiper customize-nav=".mynav" customize-nav-active-class="open">
  <div v-for="n in 3" class="random-bg">page {{n}}</div>
</swiper>
      
    

nested

If you want nest the swiper , you should add nested property to the children

Demo：

Code：

      
<swiper no-bounds>
  <div class="random-bg">page1</div>
  <swiper nested :tab-mode="['2.1','2.2','2.3']">
     <div class="random-bg">page2.1</div>
     <div class="random-bg">page2.2</div>
     <div class="random-bg">page2.3</div>
  </swiper>
  <div class="random-bg">page3</div>
</swiper>
      
    

next & prev

Switch the swiper

Demo：

Code：

      
<button @click="prev">prev</button><button @click="next">next</button>
<swiper direction="vertical" ref="switchDemo">
  <div v-for="n in 3" class="random-bg">page {{n}}</div>
</swiper>
      
      
methods:{
   prev(){
     this.$refs.switchDemo.prev()
   },
   next(){
      this.$refs.switchDemo.next()
   }
}
      
    

setPage(pageNumber,noAnimation)

pageNumber: {type: Number}
noAnimation: {description:no transition animation when switching ,type: Boolean,default: true}

Demo：

Code：

      
<button @click="toPage2">setPage(2,true)</button><button @click="toPage3">setPage(4,false)</button>
<swiper direction="vertical" ref="setPageDemo">
  <div v-for="n in 4" class="random-bg">page {{n}}</div>
</swiper>
      
      
methods:{
  toPage2(){
      this.$refs.setPageDemo.setPage(2,true)
  },
   toPage4(){
      this.$refs.setPageDemo.setPage(4,false)
   }
}
      
    

slide-change-start

Fire in the beginning of animation to other slide (next or previous). {param: pageNumber}

Demo：

Code：

      
<swiper  @slide-change-start="slideChangeStart">
  <div v-for="n in 3" class="random-bg">page {{n}}</div>
</swiper>
      
      
methods:{
    slideChangeStart(number){
        console.log('slide-change-start: ' + number)
    }
}
      
    

slide-change-end

Will be fired after animation to other slide (next or previous). {param: pageNumber}

Demo：

Code：

      
<swiper  @slide-change-end="slideChangeEnd">
  <div v-for="n in 3" class="random-bg">page {{n}}</div>
</swiper>
      
      
methods:{
    slideChangeEnd(number){
        console.log('slide-change-end: ' + number)
    }
}
      
    

slide-revert-start

Fire in the beginning of animation to revert slide (no change). {param: pageNumber}

Demo：

Code：

      
<swiper  @slide-revert-start="slideRevertStart">
  <div v-for="n in 3" class="random-bg">page {{n}}</div>
</swiper>
      
      
methods:{
   slideRevertStart(number){
        console.log('slide-revert-start: ' + number)
   }
}
      
    

slide-revert-end

Will be fired after animation to revert slide (no change). {param: pageNumber}

Demo：

Code：

      
<swiper  @slide-revert-end="slideRevertEnd">
  <div v-for="n in 3" class="random-bg">page {{n}}</div>
</swiper>
      
      
methods:{
   slideRevertEnd(number){
        console.log('slide-revert-end: ' + number)
   }
}
      
    

slider-move

Callback function, will be executed when user touch and move finger over Swiper and move it. Receives swiper instance and 'touchmove' event as an arguments. {param: offset}

Demo：

Code：

      
<swiper @slider-move="sliderMove">
  <div v-for="n in 3" class="random-bg">page {{n}}</div>
</swiper>
      
      
methods:{
   sliderMove(offset){
        console.log('slider-move: ' + offset)
   }
}