小程序轮播图带数字序号

   // bindchange='onSlideChange' 滑动时触发   
   // bindtap="bigImg"点击图片预览
  <!-- 轮播图 -->
    <swiper autoplay circular="true" bindchange='onSlideChange'>
        <swiper-item wx:for="{{data.imagess}}" wx:key="{{index}}">
            <image src="{{item}}-img" bindtap="bigImg"></image>
        </swiper-item>
    </swiper>
    <view class="num">{{lunboindex}}/{{data.imagess.length}}</view>

// 轮播图滑动时触发，当前页索引改变
  onSlideChange(e) {
    this.setData({
      lunboindex: e.detail.current + 1
    })
  },
 // 点击图片预览
  bigImg(e) {
    wx.previewImage({
      urls: this.data.data.imagess,
    })
  },

 swiper {
        width: 100%;
        height: 640rpx;

        swiper-item {
            image {
                width: 100%;
                height: 100%;
            }
        }
    }

    .num {
        position: absolute;
        top: 580rpx;
        right: 20rpx;
        width: 92rpx;
        height: 42rpx;
        background: rgba(255, 255, 255, 1);
        opacity: 0.8;
        border-radius: 21rpx;
        text-align: center;
        line-height: 42rpx;
    }