基础用法
最基础的轮播图
number{{ i }}
自动轮播
通过设置autoplayTime,让轮播图自动播放
number{{ i }}
关闭Loop 模式
默认 Loop 开启, 关闭loop,则阻止循环切换
number{{ i }}
不显示pagination
默认 pagination 开启, 关闭pagination,则不显示pagination
number{{ i }}
过渡时长
speed, 单位ms, 切换卡片时的过渡效果的播放时长, 默认300ms
number{{ i }}
切换的滑动最小距离
成功触发切换卡片事件的最小滑动距离,可以传入百分比,如 '20%',或者传入具体像素距离,如 '80px'。
number{{ i }}
双向绑定数据
通过 v-model 双向绑定了轮播图的索引。轮播图自动切换时会因此 v-model 绑定的值的改变,同时也可以通过改变 v-model 的赋值来改变轮播图的索引。
下面两个按钮显式的改变了 v-model 的值
后退
= 5 ? 0 : index3 + 1">前进
当前卡片索引 {{ index3 }}
number{{ i }}
动态改变配置属性
充分发挥了响应式数据的特性,组件随时会根据配置 props 的改变而改变自身的表现
{{isLoop ? '关闭 Loop 模式' : '开启 Loop 模式'}}
{{autoplay ? '关闭自动轮播' : '开启自动轮播'}}
{{pagination ? '移除导航器' : '添加导航器'}}
number{{ i }}
异步添加轮播图
添加一个卡片
减少一张卡片
number{{ i }}