vue3+swiper实现3D横向焦点图效果

1.安装swiper插件

npm install swiper@5.4.5

2.引入swiper文件

import 'swiper/css/swiper.css'
import Swiper from 'swiper'

3.代码

<div class="box">
	<div class="swiper" id="certify">
		<div class="swiper-container" v-if="data.bannerList.length">
			<div class="swiper-wrapper">
				<div class="swiper-slide" v-for="item in data.bannerList">
					<img :src="item.url" @click="goredirect(item.redirect)" />
				</div>
			</div>
		    <div class="swiper-pagination"></div>
		</div>
	</div>
</div>

//js
  
获取banner数据接口
getBannerList().then(res => {
	data.bannerList = res.data
	nextTick(() => {
        //在加载完之后执行swiper函数，否则loop失效，不会循环播放
		setSwiper()
	})
})

const setSwiper = () => {
	const swiper = new Swiper('.swiper-container', {
		loop: true, // 是否循环播放
		autoplay: true, //是否自动播放 true 是  false 否
		slidesPerView: 2, //一排展示几个
		effect: 'coverflow', //轮播图的切换效果  coverflow 3D
		centeredSlides: true, // 设定为true时，active slide会居中，而不是默认状态下的居左。
		spaceBetween: '-75%', //每个轮播图之间设置距离（单位px）。
		pagination: {
			el: '.swiper-pagination',
			clickable: true
		},
		coverflowEffect: {
			rotate: 0, //slide做3d旋转时Y轴的旋转角度
			stretch: 1, //每个slide之间的拉伸值，越大slide靠得越紧。5.3.6 后可使用%百分比
			depth: 80, //slide的位置深度。值越大z轴距离越远，看起来越小。
			modifier: 7, //depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显
			slideShadows: false //是否开启slide阴影
		},
		observer: true, //修改swiper自己或子元素时，自动初始化swiper
		observeParents: false //修改swiper的父元素时，自动初始化swiper
	})
}


//css
.box {
	height: 470px;
	width: 100%;
}
.swiper {
	margin: 20px;
	height: 470px;

	img {
		width: 600px;
		height: 420px;
		border-radius: 50px;
		object-fit: cover;
		opacity: 0;
	}
}
.swiper-slide-active,
.swiper-slide-prev,
.swiper-slide-next {
	img {
		opacity: 1;
	}
}
.swiper-container {
	width: 100%;
	height: 470px;

	::v-deep(.swiper-pagination-bullet) {
		width: 10px;
		height: 10px;
		background: #999999;
		opacity: 1;
	}

	::v-deep(.swiper-pagination-bullet-active) {
		background: #1ab8e7;
	}
}

.swiper-pagination {
	bottom: 0;
}

.bird {
	margin-top: 20px;
}