网页布局部分
<!-- 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;
}
}
}
效果展示