微信小程序-轮播图

Swiper官网地址

Demo:不自动滚动、衔接播放。
.wxml

<view class='section'>
  <swiper class="scroll-view_H" indicator-dots="true" indicator-active-color="#ff6700" autoplay="{{false}}" duration='500' circular='true' bindchange='swiperChanged'>
    <block wx:for="{{slides}}" wx:key="item">
      <swiper-item bindtap="tapSwiperItem">
        <image class='scroll-view-item-H' src='{{item.ad_image_url}}'></image>
      </swiper-item>
    </block>
  </swiper>
</view>

.wxss

.scroll-view_H {
  top: 10px;
  left: 0px;
  border-color: red;
  width: 100%;
  height: 240px;
  background-color: rosybrown;
}

.scroll-view-item-H {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}