【小程序】轮播图swiper的实例（图文+代码）

敦厚的曹操

已于 2022-04-26 11:32:54 修改

阅读量2k

点赞数

分类专栏： 0.【小程序】文章标签：小程序 html 轮播图

于 2022-01-17 15:56:57 首次发布

本文链接：https://blog.csdn.net/dxnn520/article/details/122541762

版权

0.【小程序】专栏收录该内容

55 篇文章 3 订阅

订阅专栏

1、swiper.wxml


<view>

    <swiper class="banner" indicator-dots="true" indicator-color="0,0,0,0.8"
    indicator-active-color="white"
    autoplay="true"
    interval="1500"
    circular="true" >
        <swiper-item>
            <image src="/pages/images/b1.jpg"></image>
        </swiper-item>
        <swiper-item>
            <image src="/pages/images/b2.jpg"></image>
        </swiper-item>
        <swiper-item>
            <image src="/pages/images/b3.jpg"></image>
        </swiper-item>
        <swiper-item>
            <image src="/pages/images/b4.jpg"></image>
        </swiper-item>
    </swiper>
</view>

2、swiper.wxss

/* pages/index/swiper.wxss */
.banner {
    width:100%;
    height:156px;
}
.banner image{
width:100%;
height:100%;
}

3、swiper.wxss（圆角图片样式）

.banner {
  width: 95%;
  height: 156px;
  border-radius: 10px;
  margin: 0 auto;
  overflow: hidden;
}

.banner image {
  border-radius: 10px;
  width: 100%;
  height: 100%;
}