vue 可以直接使用插件
效果如图：

主要设置如下：

<swiper class="service-advantage" ref="carouselSwiper" :options="swiperOptions">
	<swiper-slide v-for="(item,index) in serviceAdvantageData" :key="`item${index}`">
		<div class="card-area">
			第{{index}}张swiper-slide
		</div>
	</swiper-slide>
</swiper>

参数设置：

swiperOptions: {
	slidesPerView: 2, //设置slider容器能够同时显示的slides数量,可以是小数,设置为2时,如图所示，设置为3则会出现三张完整的active slide，如API的例子,即设置为偶数时会自动使两边的缩进，类似遮盖一半的效果
	spaceBetween: 30,
	centeredSlides: true,//设定为true时，active slide会居中，而不是默认状态下的居左
	loop: true,
	slideToClickedSlide: true,//true:点击slide会过渡到这个slide,默认false
	pagination: {
		el: '.swiper-pagination',
		clickable: true
	}
}

样式调整：

.swiper-slide {
	height: 95%;
	text-align: center;
	font-size: 18px;
	background: #fff;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	transition: 300ms;
	transform: scale(0.8);
	border-radius: 12px;
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
	transform: scale(1);
}

备注：
vue-awesome-swiper的使用：
1、安装：

npm install swiper@5.4.5 --save-dev
npm install vue-awesome-swiper@4.1.1 --save-dev

目前安装的版本是：

"swiper": "^5.4.5",
"vue-awesome-swiper": "^4.1.1",

2、main.js内全局引入：

// swiper切换
import VueAwesomeSwiper from "vue-awesome-swiper";
import "swiper/css/swiper.css";
Vue.use(VueAwesomeSwiper);

就可以像上面代码使用了。

---

注：

---

// (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

// (<= Swiper 5.x)
import "swiper/css/swiper.css";

根据安装版本及vueCli版本的不同，可能会报类似找不到css的错误，如下：

解决方式：
改变引入css的方式。
代码中使用的是 (<= Swiper 5.x)的引入方式，但是vueCli换成@vue/cli 5.0.1生成项目后
import “swiper/css/swiper.css”;这种引入方式就会报错，提示找不到，可尝试用下面的引入方式：

import 'swiper/dist/css/swiper.min.css'
//import 'swiper/dist/js/swiper.min'   //未压缩版

说明：
获取当前slide下标：
data内声明：

data() {
	const self = this;
	return{
	swiperOptions: {
		direction: 'vertical',
		autoHeight: true,
		mousewheel: false, //可鼠标滑动切换
		threshold: 50, //拖动的临界值
		touchAngle: 10, //允许触发拖动的角度值
		on: {
			slideChangeTransitionEnd: function (swiper) {
				// console.log(this.activeIndex);
				self.index = this.activeIndex; //这里的this指向swiper实例，activeIndex是里面的一个内置属性，也就是激活slide的下标（从0开始）
			},
			click: function (swiper) {
				// 通过$refs获取对应的swiper对象
				// let swiper = this.$refs.mySwiper.swiper;
			},
		},
		pagination: {
			el: '.swiper-pagination',
			clickable: true
		}
	}
}