小程序swiper轮播图
先上效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/54d40adad9f5c8aa4d3f92d72e9c6681.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f172e4eca367a171974b42fff74596ef.png)
wxml代码
<swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" indicator-color="{{beforeColor}}"
indicator-active-color="{{afterColor}}" wx:key="{{index}}">
<block wx:for="{{imgs}}" wx:key="{{index}}">
<swiper-item>
<image class="img" src="{{item.url}}" mode="widthFix"></image>
</swiper-item>
</block>
</swiper>
js代码
imgs:[
{ url: '../images1/title/1.jpg'},
{ url: '../images1/title/2.jpg'},
{ url: '../images1/title/3.jpg'},
{ url: '../images1/title/4.jpg'},
{ url: '../images1/title/5.jpg'},
],
indicatorDots: true,//显示面板指示点
autoplay: true,//自动播放
beforeColor: "white",//指示点颜色
afterColor: "coral"//当前选中的指示点颜色
wxss代码
.swiper {
height: 350rpx;
}
.img{
width: 100%;
}