如何更改当前展示的图片的宽度？

Question

就是想让当前的展示的图片更宽一些 中间的空隙更小一些 这是网上找的代码 调了半天 都没法调宽度 直接调宽度 左右多出来的边会不一样宽 请问这个应该改哪里？

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    imgUrls: [
      'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
      'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
      'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640',
      'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
      'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
      'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
    ],
    indicatorDots: true, //是否显示面板指示点
    autoplay: true, //是否自动播放
    interval: 3000, //停留时间间隔
    duration: 1000, //播放时长
    previousMargin: '50px', //前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
    nextMargin: '50px', //后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
    circular: true, //是否采用衔接滑动
    currentSwiperIndex: 0, //swiper当前索引
  },
 
  swiperBindchange(e) {
    this.setData({
      currentSwiperIndex: e.detail.current
    })
  },
})

<swiper
  indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}"
  interval="{{interval}}"
  duration="{{duration}}"
  previous-margin="{{previousMargin}}" 
  next-margin="{{nextMargin}}"
  circular="{{circular}}"
  bindchange="swiperBindchange"
>
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image {{currentSwiperIndex == index ? 'zoom-in' : 'zoom-out'}}"/>
    </swiper-item>
  </block>
</swiper>

swiper{
  margin-top: 50rpx;
}
 
.slide-image {
  width: 100%;
  height: 100%;
}
 
.zoom-out {
  transform: scale(0.8);
  transition: all 0.7s ease-out 0s;
}
 
.zoom-in {
  transform: scale(1);
  transition: all 0.7s ease-in 0s;
}

Answer 1

swiper 有设置间隙的api spaceBetween