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 | 底部指示器是否显示 |