正常 配置swiper:
1: 安装 vue-awesome-swiper --save (我的版本 4.1.1)
text
1
npm install vue-awesome-swiper --save
2: 安装swiper , 重点来了(截止今日,我安装的最新到了6.5,但是兄弟们,千万不要安装6以上,坑的一批,版本不配套 = =)
text
1
npm install swiper@5.2.0 --save
3:Plugin 里配置js
text
1
2
3
4
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
4:Nuxt.config.js 里配置css (如果非要用最新版的,这里的css文件位置会变化,具体去 node_module 的swiper里找就行了 )
text
1
2
3
4
5
css: [
{
src: 'swiper/css/swiper.css'
}
]
5:nuxt 组件内使用 (以下代码来自于 https://www.npmjs.com/package/vue-awesome-swiper)
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template>
<div v-swiper:mySwiper="swiperOption">
<div class="swiper-wrapper">
<div class="swiper-slide" :key="banner" v-for="banner in banners">
<img :src="banner">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</template>
<script>
export default {
data () {
return {
banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
swiperOption: {
pagination: {
el: '.swiper-pagination'
},
// ...
}
}
},
mounted() {
console.log('Current Swiper instance object', this.mySwiper)
this.mySwiper.slideTo(3, 1000, false)
}
}
</script>