[wechat applet] swiper slides the page, and the left and right sides of the slider show part of the front and back, showing part of the front and back

<!--pages/vip/vip.wxml-->
<view class="pageBox">
  <swiper class="swiper" current="{
    {currentTab}}" next-margin="50rpx" previous-margin="50rpx" bindchange="switchTab" style="width: 100%;height:400rpx;position: absolute;top:{
    {40*2}}rpx;left: 0;z-index: 999;">
    <block wx:for="{
    {4}}" wx:key="index">
      <swiper-item item-id="{
    {index}}" data-item-id="{
    {index}}" bindtap='clickChange'>
        <view class='li'>
          <image class="vipImg" src="/image/vip{
    {index}}.png"></image>
        </view>
      </swiper-item>
    </block>
  </swiper>
  <swiper class="tab-content" current="{
    {currentTab}}" duration="300" bindchange="switchTab">
    <swiper-item wx:for="{
    {4}}" wx:key="index">
      <scroll-view scroll-y="true" class="scoll-h">
        <image class="bgImg" src="/image/vip{
    {index}}Bg.png" show-menu-by-longpress></image>
      </scroll-view>
    </swiper-item>
  </swiper>
</view>

/* pages/vip/vip.wxss */
page {
    
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  background-color: #1a1728;
}

.pageBox {
     
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #1a1728;

}
    

 
.vipImg {
    
  width: 95%;
  height: 90%;
  position: relative;
}

.vipImg:nth-child(4) {
    
  width: 120%;
  height: 90%;
  position: relative;
}
  
.tab-content,
.bgImg {
    
  width: 100%;
  height: 100%;
}

.scoll-h {
    
  height: 100%;
}

.scrollBox {
    
  /* background-color: pink; */
  height: 380rpx;
  display: flex;
  flex-wrap: nowrap;
  width: 400%;
}

.vipCurrImg {
    
  position: absolute;
  top: 25%;
  left: 48%;
  width: 104rpx;
  height: 40rpx;
}
 
.li {
    
  width: 100%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
}
 

const app = getApp()
Page({
    

  /** *  Initial data of the page  */
  data: {
      
    currentTab: 0, // Default the value of the current item 
  }, 
 
  //  Scroll to switch label styles 
  switchTab: function (e) {
    
    console.log('swiper', this.data.currentTab);
    console.log('swiper', e.detail.current);
    this.setData({
    
      currentTab: e.detail.current,
    });
    console.log(e.detail.current);
    // this.checkCor();
  },