滑块视图容器(焦点轮播图)
原创...大约 1 分钟
为了更美观,可以让图片宽度充满全屏,并保持图片不变形
<swiper>
<swiper-item>
<image mode="widthFix" src="../../images/1.png"></image>
</swiper-item>
<swiper-item>
<image mode="widthFix" src="../../images/1.png"></image>
</swiper-item>
<swiper-item>
<image mode="widthFix" src="../../images/1.png"></image>
</swiper-item>
</swiper>
同时设置图片样式充满全屏,因为图片默认大小:宽度 320px、高度 240px,可让宽度充满全屏
image {
width: 100%;
}
Swiper 常用属性说明
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
indicator-dots | boolean | false | 否 | 是否显示面板指示点 |
indicator-color | color | rgba(0, 0, 0, .3) | 否 | 指示点颜色 |
indicator-active-color | color | #000000 | 否 | 当前选中的指示点颜色 |
autoplay | boolean | false | 否 | 是否自动切换 |
interval | number | 5000 | 否 | 自动切换时间间隔 |
duration | number | 500 | 否 | 滑动动画时长 |
circular | boolean | false | 否 | 是否采用衔接滑动 |
vertical | boolean | false | 否 | 滑动方向是否为纵向 |
<swiper
class="swiper"
indicator-dots
indicator-color="#fff"
indicator-active-color="#f00"
autoplay
interval="5000"
duration="1000"
circular
vertical
>
<swiper-item>
<image mode="widthFix" src="../../images/1.png"></image>
</swiper-item>
<swiper-item>
<image mode="widthFix" src="../../images/1.png"></image>
</swiper-item>
<swiper-item>
<image mode="widthFix" src="../../images/1.png"></image>
</swiper-item>
</swiper>
Powered by Waline v2.15.7