Slider轮播图
ICEUI框架中集成了轮播图功能,无需js控制,只需要简单的几行html就能实现。
HTML基本结构
标准风格
人生无需太多,半盏清茗,一曲清音
闲煮时光,沿着季节的尘烟,安静的行走
晨间的烟雨还泛着薄凉,只是轩窗外风的一声轻唤
时光清浅,芳草纤绵,时间终究会过滤掉一切繁杂
就在安静里倾城,慈悲里生暖,尘烟里温柔而立
上下滚动 data-slider-ani="ud"
淡入淡出 data-slider-ani="fade"
滚动时间设置,例如5秒 data-slider-time="5000"
隐藏左右箭头控制 data-slider-arrow="false"
隐藏下面的指示器 data-slider-button="false"
box面板中使用
轮播图
slider-轮播
使用说明

该轮播无需使用js方法启动,只需要添加class.slider.slider-item即可。

具体功能和展示方式写法只需要添加attr属性,具体如下

class属性设置,具体如下

class 是否必须添加 说明
slider 必须 轮播的主容器
slider-item 必须 轮播项,里面可以为图片或者文字,具体宽高随轮播的内容,需放置在slider中
slider-prev 可选 上一张轮播的按钮,需放置在slider中
slider-next 可选 下一张轮播的按钮,需放置在slider中
slider-button 可选 存放小圆点的容器,需放置在slider中
提示:应该设置其中一个.slider-item为默认展示,需添加一个.action,这不会导致页面初步加载时闪烁!

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