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

实现如下的功能：

动图展示效果

代码如下:
index.wxml

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": {}
}