文章
/
learn / wechatapp
/ 轮播图设置
返回文章列表

这篇文章已经发布超过一年了，内容可能已经过时，请谨慎参考。

轮播图设置

#wechatApp

swiper 轮播图设置

示例

<swiper
  class="swiper"
  indicator-dots
  indicator-color="#ffffff"
  indicator-active-color="#00aaff"
  autoplay
  interval="3000"
  duration="500"
  circular
>
  <swiper-item><image src="/images/1.jpg" mode="aspectFill" /></swiper-item>
  <swiper-item><image src="/images/2.jpg" mode="aspectFill" /></swiper-item>
  <swiper-item><image src="/images/3.jpg" mode="aspectFill" /></swiper-item>
</swiper>

常用属性

  • indicator-dots：显示指示点
  • indicator-color：未激活指示点颜色
  • indicator-active-color：当前指示点颜色
  • autoplay：自动播放
  • interval：自动播放间隔（毫秒）
  • duration：滑动动画时长（毫秒）
  • circular：衔接播放