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