微信小程序轮播图实现

<!--轮播图start--> 
<swiper class="slides" autoplay="{{slides.length > 1}}" indicator-dots="{{slides.length > 1}}" indicator-color="#bcc0c9" indicator-active-color="#3a4861"> 
    <swiper-item wx:for="{{slides}}" wx:key="id"> 
        <navigator wx:if="{{item.path}}" url="{{item.path}}"> 
            <image src="{{item.img_url}}" mode="aspectFill" /> 
        </navigator> 
        <image wx:else src="{{item.img_url}}" mode="aspectFill" /> 
    </swiper-item> 
</swiper> 
<!--轮播图end--> 

.slides { 
    height: 380rpx; 
} 

.slides navigator, 
.slides image { 
    width: 100%; 
    height: 100%; 
} 

onLoad: function(options) { 
    var that = this; 
    wx.request({ 
        url: 'http://api.xxx.com', 
        method: 'GET', 
        success: function(res) { 
            console.log(res.data.data) 
            that.setData({ 
                slides: res.data.data 
            }) 
        } 
    }) 
},