使用的版本
swiper : ^7.3.1
vue-awesome-swiper : ^3.1.3
1.安装
npm i swiper -S
npm i vue-awesome-swiper@3.1.3 -S
2.main.js全局引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
//引入样式
import 'swiper/swiper-bundle.css'
Vue.use(VueAwesomeSwiper)
3.代码
<template>
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide v-for="item in 5" :key="item">{{item}}</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</template>
export default {
data(){
return{
swiperOptions: {
pagination: {
el: '.swiper-pagination',
},
},
}
}
}
各位根据需要在里面自行配置,参考官方文档