先装swiper插件npm install --save vue-awesome-swiper
引入第三方插件一般放置到plugins目录下
创建swiper.js
import Vue from 'vue'
import css from 'swiper/dist/css/swiper.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'
export default () => {
Vue.use(VueAwesomeSwiper,{css})
}
接着在nuxt.config.js的plugins里配置
plugins: [
{ src: "~/plugins/swiper.js", ssr: false }
],
页面上标签这样写
<div v-swiper:mySwiper="swiperOption" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,idx) in swiperData" :key="idx">
<img :src="item.imgUrl" class="img1" />
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
安装的swiper版本为4.1.1，swiper配置如下：
swiperOption: {
pagination: '.swiper-pagination',
paginationClickable: true,
autoplay: 2000,
speed: 1000,
loop: true,
observer: true,
observeParents: true,
autoplayDisableOnInteraction: false,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
}
