媒介
现在(2017-07-11)在运用vue-cli竖立的webpack版项目中，直接引入官方的swiper文件会致使报错，所以须要用到vue版本的swiper。
webpack-simple版可直接引入官方swiper文件，参考这里
新建vue项目
此处运用
vue-cli新建项目
vue init webpack demo
//Enter + y 悉数选 yes
cd demo
npm i补装置sass-loader node-sass
因为不明缘由，
vue的webpack版竟没有装sass，须要别的装置，不须要用sass则可跳过此步。
npm i -D sass-loader node-sass装置vue版swiper
npm i -S vue-awesome-swiper设置运用
import vue-awesome-swiper
import { swiper, swiperSlide } from 'vue-awesome-swiper'插进去滑块组件
与官方swiper雷同，分外的控制器依旧能够放到全部滑块以外。
<swiper :options="swiperOption" ref="mySwiper">
<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>设置参数
export default {
name: 'carrousel',
data() {
return {
swiperOption: {
// notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会经由过程NextTick来实例化swiper，也就意味着你能够在第一时间猎取到swiper对象，如果你须要刚加载遍运用猎取swiper对象来做什么事，那末这个属性肯定如果true
notNextTick: true,
// swiper configs 一切的设置同swiper官方api设置
autoplay: 3000,
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next',
}
}
},
components: {
swiper,
swiperSlide
},
}
</script>完全参考
demo.vue
<template>
...
<swiper :options="swiperOption" ref="mySwiper">
<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
...
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
name: 'carrousel',
data() {
return {
swiperOption: {
// NotNextTick is a component's own property, and if notNextTick is set to true, the component will not instantiate the swiper through NextTick, which means you can get the swiper object the first time (if you need to use the get swiper object to do what Things, then this property must be true)
// notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会经由过程NextTick来实例化swiper，也就意味着你能够在第一时间猎取到swiper对象，如果你须要刚加载遍运用猎取swiper对象来做什么事，那末这个属性肯定如果true
notNextTick: true,
// swiper configs 一切的设置同swiper官方api设置
autoplay: 3000,
// direction : 'vertical',
effect:"coverflow",
grabCursor : true,
setWrapperSize :true,
// autoHeight: true,
// paginationType:"bullets",
pagination : '.swiper-pagination',
paginationClickable :true,
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next',
// scrollbar:'.swiper-scrollbar',
//mousewheelControl : true,
observeParents:true,
// if you need use plugins in the swiper, you can config in here like this
// 如果自行设计了插件，那末插件的一些设置相干参数，也应当出现在这个对象中，以下debugger
// debugger: true,
// swiper callbacks
// swiper的种种回调函数也能够出现在这个对象中，和swiper官方一样
// onTransitionStart(swiper){
// console.log(swiper)
// },
// more Swiper configs and callbacks...
// ...
}
}
},
components: {
swiper,
swiperSlide
},
// you can find current swiper instance object like this, while the notNextTick property value must be true
// 如果你须要获得当前的swiper对象来做一些事变，你能够像下面如许定义一个要领属性来猎取当前的swiper对象，同时notNextTick必需为true
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
mounted() {
// you can use current swiper instance object to do something(swiper methods)
// 然后你就能够运用当前上下文内的swiper对象去做你想做的事了
// console.log('this is current swiper instance object', this.swiper)
// this.swiper.slideTo(3, 1000, false)
console.log('mounted');
}
}
</script>