版权声明：在那最初的相遇中，我们都曾经为彼此心动过... https://blog.csdn.net/weixin_36185028/article/details/82946293
1.安装swiper
npm install vue-awesome-swiper --save 2.在plugins下新建vue-swiper.js文件
import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr' Vue.use(VueAwesomeSwiper) 3.在nuxt.config.js中引入
//其他代码 css:[ { src: "swiper/dist/css/swiper.css" } ], plugins:[ { src: "~/plugins/vue-swiper.js", ssr: false }, ] //其他代码 4.在页面中使用举例
<template> <!-- You can find this swiper instance object in current component by the "mySwiper" --> <div v-swiper:mySwiper="swiperOption"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="banner in banners"> <img :src="banner"> </div> </div> <div class="swiper-pagination swiper-pagination-bullets"></div> </div> </template> <script> export default { data () { return { banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ], swiperOption: { loop: true, slidesPerView: 'auto', centeredSlides: true, spaceBetween: 30, pagination: { el: '.swiper-pagination', dynamicBullets: true }, on: { slideChange() { console.log('onSlideChangeEnd', this); }, tap() { console.log('onTap', this); } } } } }, mounted() { console.log('app init', this) setTimeout(() => { this.banners.push('/5.jpg') console.log('banners update') }, 3000) console.log( 'This is current swiper instance object', this.mySwiper, 'I will slideTo banners 3') this.mySwiper.slideTo(3) } } </script> <style lang="scss" scoped> .my-swiper { height: 300px; width: 100%; .swiper-slide { text-align: center; font-size: 38px; font-weight: 700; background-color: #eee; display: flex; justify-content: center; align-items: center; } .swiper-pagination { > .swiper-pagination-bullet { background-color: red; } } } </style> 文章来源: nuxt.js使用swiper