小程序 swiper左右扩展各显示一半

实现如下的功能：

代码如下:
index.wxml

<swiper class='swiper' next-margin='120rpx' bindchange='swiper'>
  <block wx:for="{{devices}}" wx:key="" wx:for-item="device">
    <swiper-item item-id="{{device.type}}">
      <view class="device {{swiperIndex == index ?'active':''}}" data-currentTab="{{index}}">
        <view class='device-img'>
          <image src='{{device.deviceImg}}'></image>
        </view>
      </view>
    </swiper-item>
  </block>
</swiper>

index.js

Page({
  data: {
    swiperIndex: 0,
    // 设置页面
    devices: [
      {
        deviceImg: "../../img/1.jpg"
      },
      {
        deviceImg: "../../img/2.jpg"
      },
      {
        deviceImg: "../../img/3.jpg"
      }
    ],
  },
  swiper: function (e) {
    let that = this;
    let index = e.detail.current;
    that.setData({
      swiperIndex: index
    });
  }
})

index.wss

/* 轮播图 */
.devices{
  width: 638rpx;
}
.swiper{
  width: 580rpx;
  height: 600rpx;
  margin-left:48rpx;
  white-space:nowrap;
  /* border: solid red 1px;  */
}

.device{
  width: 410rpx;
  height: 94%;
  display:inline-block;
  margin-left: 20rpx;
  background: rosybrown;
  transform: scale(0.9);
  transition:all .2s ease 0s; 
}
.active{
  transform: none;
  transition: all 0.2s ease-in 0s;
}
.device-img{
  width: 100%;
  height: 520rpx;
  margin-top: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.device-img image{
  width:350rpx;
  height:190rpx;
}

index.json

{
  "usingComponents": {}
}