微信小程序实现轮播图

提示：由于微信小程序自带标签<swiper></swiper>所以不需要引入任何组件

---

swiper属性

须知：使用前我们需要了解<swiper></swiper>的属性

• indicator-dots：是否显示面板指示点，默认值为false，设置为true时显示指示点。
• indicator-color：指示点的颜色，默认值为rgba(0, 0, 0, .3)，可以设置为任何有效的颜色值。
• indicator-active-color：当前选中指示点的颜色，默认值为#000000，可以设置为任何有效的颜色值。
• autoplay：是否自动切换，默认值为false，设置为true时自动切换。
• current：当前所在滑块的索引值（从0开始），可以通过改变该值来切换到指定的滑块。
• interval：自动切换时间间隔，单位为毫秒，默认值为5000，即5秒。
• duration：滑动动画时长，单位为毫秒，默认值为500，即0.5秒。
• circular：是否采用衔接滑动，默认值为false，设置为true时可循环滑动。
• vertical：滑动方向是否为纵向，默认值为false，设置为true时滑动方向为纵向。

---

基础wxml搭建

<swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="{{3000}}">
  <swiper-item>
    <!-- 第一个滑块内容 -->
  </swiper-item>
  <swiper-item>
    <!-- 第二个滑块内容 -->
  </swiper-item>
  <swiper-item>
    <!-- 第三个滑块内容 -->
  </swiper-item>
</swiper>

---

总结

如果要实现swiper的多种功能，可以自行添加上述属性。