uniapp 小程序轮播图左右两边显示一部分图片

<!-- 轮播图 -->
<swiper class="banner-container" indicator-dots="true" autoplay="true" circular="true" interval="3000" 
	duration="1000"  previous-margin="20rpx" next-margin="20rpx">
	<block v-for="(item,index) in swiperData" :key="index">
		<swiper-item class="banner-item">
			<view class="banner-box">
				<image class="banner-img" :src="item.imgUrl" ></image>
			</view>
		</swiper-item>
	</block>
</swiper>

/* 轮播图 */
.banner-container{
  width: 100%;
  height: 350rpx;
}
.banner-item{
  display:flex;
  justify-content: center;
}
.banner-box{
  width: 99%; /* 控制两张图片的间距 */
  height: 100%;
}
.banner-img{
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

以下实现轮播图中间大两头小的3D效果：

		<!-- 轮播图 -->
		<view class="banner">
			<swiper class="banner-container" indicator-dots="true" autoplay="true" circular="true" interval="3000" 
				duration="1000"  previous-margin="50rpx" next-margin="50rpx" @change="cIndex" >
				<block v-for="(item,index) in swiperData" :key="index">
					<swiper-item >
						<image class="slide-image" :class="[ currentIndex === index ? 'active':'' ]" :src="item.imgUrl" ></image>
					</swiper-item>
				</block>
			</swiper>
		</view>

		data() {
    
    
			return {
    
    
				currentIndex:0
			} 
		},
		
		cIndex(e) {
    
    
			this.currentIndex = e.detail.current				
		}

	/* 轮播图 */
	.banner{
    
    
		height: 300rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		position: absolute;
		z-index: 999;
		top: 15%;		
	}
	.banner-container{
    
    
	  width: 100%;
	  height: 350rpx;
	}
	.slide-image {
    
    
	  position: absolute;
	  height: 260rpx;
	  width: 98%;	  
	  border-radius: 10rpx;
	  z-index: 5;
	  opacity: 0.7; /*透明度*/
	  top: 15%;	  
	}	
	.active {
    
    
	  opacity: 1;
	  z-index: 10;
	  height: 350rpx;
	  width: 98%;
	  border-radius: 10rpx;
	  top: 0%;
	  transition: all 0.2s ease-in 0s;
	}