uniapp或微信开发 使用 swiper 组件 实现 3d 轮播 中间大图另外两张小图

话不多说上图

html部分

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

script部分

data(){
	return{
		currentIndex: 0
	}
}

methods:{
	swierChange(e){
			this.currentIndex = e.detail.current
		},
}

css部分

.slide-image {
  position: absolute;
  height: 200rpx;
  width: 570rpx;
  border-radius: 15rpx;
  z-index: 5;
  opacity: 0.7;
  top: 18%;
  margin: 0 20rpx;
}

swiper {
  height: 430rpx;
}

.active {
  opacity: 1;
  z-index: 10;
  height: 316rpx;
  width: 572rpx;
  top: 7%;
  transition: all 0.2s ease-in 0s;
}

这样 效果就完成了