微信小程序实现轮播图swiper

前言： 微信小程序提供了滑块视图容器swiper实现轮播图效果。
具体实现代码：

1.index.wxml文件

<swiper class="list"  circular="true" indicator-dots="{
    
    { true }}" autoplay="true" interval="3000" duration="1000">
  <swiper-item class="item" wx:for="{
    
    { bannerArr }}" wx:key="index">
    <image class="home-bg" src="{
    
    { item }}"></image>
  </swiper-item>
</swiper>

2.index.js文件

data: {
    
    
   // banner轮播图列表数据
   bannerArr: [
     '../../img/banner1.png',
     '../../img/banner2.png',
     '../../img/banner3.png',
   ]
},

3.index.wxss文件

.home-bg,.list{
    
    
  width: 100%;
  height: 500rpx;
  margin-bottom: 20rpx;
}

详细配置项和方法参考官网： https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

最终效果：