uniapp中间大两边小轮播图

html部分

<view class="">
			<swiper :autoplay="false" :current="currentIndex" :circular="true" previous-margin="80rpx" next-margin="80rpx"
			 :interval="3000" :duration="500" @change="swierChange">
				<swiper-item v-for="(item,i) in 5" :key="i">
					<image src="../../static/logo.png" class="slide-image" :class="currentIndex === i?'active':''"></image>
				</swiper-item>
			</swiper>
</view>

js部分

<script>
	export default {
		name: "",
		data() {
			return {
				currentIndex: 0
			}
		},
		methods: {
			swierChange(e){
				this.currentIndex = e.detail.current
			},
		},
	}
</script>

css部分

<style>
		.slide-image {
	  position: absolute;
	  height: 200rpx;
	  width:75vw;
	  z-index: 5;
	  opacity: 0.8;
	  top: 18%;
	  margin: 0 20rpx;
	}
	
	swiper {
	  height: 60vw;
	}
	
	.active {
	  opacity: 1;
	  z-index: 10;
	  height: 320rpx;
	  width: 75vw;
	  top: 7%;
	  transition: all 0.2s ease-in 0s;
	}
	
</style>