微信小程序 实现轮播图

效果图

 文档：swiper | 微信开放文档

wxml:

<view class="goodsDetails">
    <!-- 轮播图 -->
    <view class="goodsDetails_top">
        <view>
            <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
                <block wx:for="{{imgUrls}}">
                    <swiper-item>
                        <image src="{{item}}" class="slide-image" />
                    </swiper-item>
                </block>
            </swiper>
        </view>
    </view>
</view>

wxss:

.goodsDetails{
    padding: 20rpx;
}
/* 轮播图 */
.goodsDetails_top{
    width: 100%;
    background-color: #ffffff;
    border-radius: 20rpx;
    overflow: hidden;
}

js:

    data: {
        imgUrls: [
            '/assets/image/buka.jpg',
            '/assets/image/buka.jpg',
            '/assets/image/buka.jpg',
            '/assets/image/buka.jpg',
          ],
          indicatorDots: true,  //是否显示面板指示点
          autoplay: true,      //是否自动切换
          interval: 3000,       //自动切换时间间隔
          duration: 1000,       //滑动动画时长
    },