注意点
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