data-slider-ani="ud"data-slider-ani="fade"data-slider-time="5000"data-slider-arrow="false"data-slider-button="false"该轮播无需使用js方法启动,只需要添加class.slider.slider-item即可。
具体功能和展示方式写法只需要添加attr属性,具体如下
class属性设置,具体如下
| class | 是否必须添加 | 说明 |
|---|---|---|
| slider | 必须 | 轮播的主容器 |
| slider-item | 必须 | 轮播项,里面可以为图片或者文字,具体宽高随轮播的内容,需放置在slider中 |
| slider-prev | 可选 | 上一张轮播的按钮,需放置在slider中 |
| slider-next | 可选 | 下一张轮播的按钮,需放置在slider中 |
| slider-button | 可选 | 存放小圆点的容器,需放置在slider中 |
attr属性设置,具体如下
| attr | 类型 | 默认 | 说明 |
|---|---|---|---|
| data-slider-ani | string | lr | 动画类型,有效值为lr(左右轮播) ud(上下轮播) fade(淡入淡出) |
| data-slider-time | int | 3000 | 动画轮播间隔时间,单位为毫秒,1秒=1000 |
| data-slider-arrow | bool | true | 左右箭头控制是否显示 |
| data-slider-button | bool | true | 底部指示器是否显示 |