nuxt 配置 swiper 注意事项

注意点
1、 样式不生效：引入 swiper-bundle.css / swiper-bundle.min.css
2、翻页按钮不生效：引入 Navigation, Pagination

plugins 目录下新建 vue-swiper.js：

import Vue from 'vue'
import swiper, { Navigation, Pagination } from "swiper";
import VueAwesomeSwiper from 'vue-awesome-swiper'
import css from 'swiper/swiper-bundle.min.css'

export default () => {
  swiper.use([Navigation, Pagination]);
  Vue.use(VueAwesomeSwiper, { css })
}

添加如下到 nuxt.config.js ：

plugins: [
    { src: "~plugins/vue-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" class="img1" />
	  </div>
	</div>
	<div class="swiper-pagination"></div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>

配置： swiperOption

swiperOption: {
   spaceBetween: 30,
   loop: true,
   navigation: {
     nextEl: '.swiper-button-next',
     prevEl: '.swiper-button-prev'
   },
   pagination: {
     el: '.swiper-pagination',
     clickable: true,
   },
   autoplay: {
     delay: 5000,
   }
 }

效果：

参考：
https://blog.csdn.net/zxf13598202302/article/details/115529465