Vue2-swiper NPM

vue2-swiper

一个简单的vue2 swiper 插件

Getting start

NPM

npm install --save vue2-swiper

import {Swiper} from 'vue2-swiper'

new Vue({
    el: '#app',
    components: {
        Swiper
    }
})

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

or you can import vue2Swiper in main.js

import Vue from 'vue'
import vue2Swiper from 'vue2-swiper'
Vue.use(vue2Swiper)

HTML

<script type="text/javascript" src="path/to/vue.js"></script>
<script type="text/javascript" src="path/to/vue2Swiper.js"></script>
<script>
Vue.use(vue2Swiper)
var vm = new Vue({
  el: '#app'
 })
</script>

Demo & Document

git clone https://github.com/fchengjin/vue2-swiper
cd vue2-swiper
npm install
npm run dev
it will open the demo at 127.0.0.1:3030
or you can see the DEMO here

Api

props

Name	Type	Default	Description
direction	`String`	`"horizontal"`	Could be 'horizontal' or 'vertical' (for vertical slider).
mousewheel-control	`Boolean`	`false`	Set to true to enable navigation through slides using mouse wheel.
pagination-visible	`Boolean`	`false`	Toggle (hide/true) pagination container visibility when click on Slider's container
pagination-clickable	`Boolean`	`false`	If true then clicking on pagination button will cause transition to appropriate slide.
performace-mode	`Boolean`	`false`	Disable advance effect for better performance.
loop	`Boolean`	`false`	Set true to enable the loop mode
speed	`Boolean`	`500`	swiper switching speed
active-index	`Number`	`1`	The active page when initializing
no-bounds	`Boolean`	`false`	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.
forbidden-slide	`Boolean`	`false`	If true, you can not change the swiper by sliding
tab-mode	`Array`	-	f you set tabMode , it will add a tabnav above the swiper-slider.
tab-mode-animation	`Boolean`	`false`	If you just use the tab as a nav, you can set tabModeAnimation to true.
customize-nav	`String`	-	customize-nav is a dom selector, you can place it anywhere you want.
customize-nav-active-class	`String`	`active`	customize-nav-active-class
nested	`Boolean`	`false`	f you want nest the swiper , you should add nested property to the children

Methods

Method	Description
next()	switch to next slider
prev()	switch to previous slider
setPage(`pageNumber : Number`,`noAnimation : Boolean`)	NoAnimation is optional parameter, if set true, there is no transition animation when switching

Events

Name	Parameters	Description
slide-change-start	`pageNumber`	Fire in the beginning of animation to other slide (next or previous).
slide-change-end	`pageNumber`	Will be fired after animation to other slide (next or previous).
slide-revert-start	`pageNumber`	Fire in the beginning of animation to revert slide (no change).
slide-revert-end	`pageNumber`	Will be fired after animation to revert slide (no change).
slider-move	`offset`	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.