改了一下，初步测试没有问题，请各位大佬拍砖。

wxml：

<view class="container">
  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{background}}" wx:key="index">
          <swiper-item>
            <view class="swiper-item swiper-item-{{index}}" style="background: url({{item.swiperImg}})"></view>
          </swiper-item>
        </block>
      </swiper>
    </view> 
  </view>
</view>

JS：

data: {
    background: [{"swiperImg":"https://qiniu-image.qtshe.com/1536067857379_122.png"},{"swiperImg":"https://qiniu-image.qtshe.com/1536068379879_115.png"},{"swiperImg":"https://qiniu-image.qtshe.com/1536068319939_230.png"}],
    indicatorDots: true,
    vertical: false,
    autoplay: true,
    interval: 2000,
    duration: 500
}

wxss：

.swiper-item-1{
  position: relative;
  align-items: center;
  justify-content: center;
  background-size: 100%;
  color: #FFFFFF;
  font-size: 36rpx;
}
.swiper-item-1:before{
  content: 'A';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.swiper-item-2{
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #2782D7;
  color: #FFFFFF;
  font-size: 36rpx;
}
.swiper-item-2:before{
  content: 'B';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.swiper-item-3{
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #F1F1F1;
  color: #353535;
  font-size: 36rpx;
}
.swiper-item-3:before{
  content: 'C';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}