vue中使用vue-awesome-swiper插件

使用的版本

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',
	            },
	        },
		}
	}
}

各位根据需要在里面自行配置,参考官方文档

上一篇:vue.js 3.2.6 解决swiper动态加载数据时默认显示最后一页(swiper@6.8.4)


下一篇:oracle 正则表达式 非字母 非数字