小程序轮播图

<!-- 轮播图 -->
<swiper class="imageContainer" bindchange="handleChange" previous-margin="50rpx" next-margin="50rpx" circular autoplay>
  <block wx:for="{{array}}" wx:key="{{index}}" wx:for-item="item">
    <swiper-item class="item">
     <navigator url='/pages/tg_details/tg_details'>
      <image class="ima itemImg {{currentIndex == index ? 'active': ''}}" src="{{item.src}}">
        <h1 class="swiper_h1">{{item.h1}}</h1>
        <p class="swiper_p">￥{{item.sale}} 拼价团</p>
        <p class="swiper_p2">
          <del>￥{{item.price}}</del>
        </p>
        <view class="swiper_b">
          <p>{{item.all}}</p>
          <p>人拼团</p>
        </view>
        <view class="swiper_b2">
          <p>还差</p>
          <p>{{item.num}}</p>
          <p>人拼成</p>
        </view>
        <view class="swiper_b3">{{item.stat}}</view>
      </image>
      </navigator>
    </swiper-item>
    
  </block>
</swiper>
<!-- 轮播图完 -->

array:[{
      src:'images/4.png' ,
      h1:'嵛山岛-周末两日游',
      sale:'180',
      price:'1800',
      all:'18',
      num:'2',
      stat:'HOT'
           },
           {
      src:'images/4.png',
      h1: '桂林山水-七日游',
      sale: '320',
      price: '4500',
      all: '54',
      num: '6',
      stat: 'HOT'      
           },
           {
      src: 'images/4.png',
      h1: '乐山大佛-七日游',
      sale: '120',
      price: '1500',
      all: '84',
      num: '16',
      stat: 'HOT'      
           }
    ]

/* 轮播图 */
.imageContainer{
 width: 100%;
 height: 500rpx;
 background: white;
 border:0rpx solid black;
 box-sizing: border-box;
}
.item{
 height: 500rpx;
}
.itemImg{
 position: absolute;
 width: 95%;
 text-align: center;
 height: 380rpx;
 border-radius: 20rpx;
 z-index: 5;
 opacity: 0.7;
 top: 13%;
 margin:auto;
 left:0;
 right:0;
}
.active{
 opacity: 1;
 z-index: 10;
 height: 430rpx;
 top: 7%;
 transition:all .2s ease-in 0s;
}
/* 轮播图完 */