微信小程序组件——滑动视图swiper

swiper多用于页面顶部轮播显示图片。
常用属性：
indicator-dots=“true”： 显示面板指示点
indicator-active-color=“red” ： 当前选中指示点为红色。
autoplay=“true”：自动轮播。
interval=“1000”： 自动轮播时间间隔为1s，默认5s。
HTML代码：

<view>
  <text>Swiper演示：</text>
  <swiper indicator-dots="true" indicator-active-color="red" autoplay="true" interval="1000">

    <!-- 图片链接来自百度图片 -->
    <swiper-item>
      <image src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3206689113,2237998950&fm=26&gp=0.jpg"></image>
    </swiper-item>

    <swiper-item>
      <image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1309%2F25%2Fc49%2F26316176_26316176_1380092693834_mthumb.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626582780&t=4b5344ccb94b5997833cdb7f5f822a80"></image>
    </swiper-item>

    <swiper-item>
      <image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fblog.sina.com.cn%2Fpic%2F44f59d727e4f484157caa&refer=http%3A%2F%2Fblog.sina.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626582825&t=7f3590038fa47c867a676e4aedd4fb8b"></image>
    </swiper-item>
  </swiper>
</view>

CSS代码：目的是使图片完整显示

image{
  width: 100%;
  height: 100%;
}

效果图：