基础用法
默认一张图片是 50% 宽度,通过设置 width:min 设置为 25% 宽度,width:max 设置为 100% 宽度。
查看代码
1 2 3 4 5 6
| {% swiper effect:cards %} ![](https://images.unsplash.com/photo-1625171515821-1870deb2743b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80) ![](https://images.unsplash.com/photo-1528283648649-33347faa5d9e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80) ![](https://images.unsplash.com/photo-1542272201-b1ca555f8505?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80) ![](https://images.unsplash.com/photo-1524797905120-92940d3a18d6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80) {% endswiper %}
|
语法格式
1 2 3
| {% swiper [width:max] [effect:cards/coverflow] %} ![img](src) {% endswiper %}
|
切换效果
使用 effect
属性来设置图片切换效果,可选值有 cards
和 coverflow
。
注意
一个页面只能设置一次,第一个swiper
容器的效果全局生效
属性
属性 |
说明 |
width |
设置宽度 |
effect |
图片切换效果 |