网页布局部分

<!-- autoplay 设置自动播放 -->
<!-- 设置自动播放间隔:3000ms -->
<!-- indicator-dots: 轮播指示点 -->
<!-- indicator-color: 指示点颜色 -->
<!-- indicator-active-color:选中后指示灯颜色 -->
<swiper class="swiper" indicator-active-color="green" indicator-color="#fff" indicator-dots circular autoplay interval="3000">
  <swiper-item mode="aspectFill" class="item">
    <image src="/static/images/pic1.jpg"></image>
  </swiper-item>
  <swiper-item  mode="aspectFill" class="item">
    <image src="/static/images/pic2.jpg"></image>
  </swiper-item>
  <swiper-item  mode="aspectFill" class="item">
    <image src="/static/images/pic3.jpg"></image>
  </swiper-item>
</swiper>

CSS部分(这里使用的是 scss语法)

.swiper {
    height: 300rpx;
    margin-top: 100rpx;
    .item {
        padding: 0 20rpx;
        box-sizing: border-box;
        image {
            width: 100%;
            height: 300rpx;
        }
    }
}

效果展示

最后修改:2022 年 11 月 05 日
如果觉得我的文章对你有用,请随意赞赏