轮播图

轮播图组件已经打包为单独的组件,可脱离UI总组件单独使用。
下载组件

全屏效果

<div class="ui-carousel">
<div class="ui-carousel-inner">
<div class="ui-carousel-item active"><a href="#1"><img src="/upfile/a.jpg"></a></div>
<div class="ui-carousel-item"><a href="#2"><img src="/upfile/b.jpg"></a></div>
<div class="ui-carousel-item"><a href="#3"><img src="/upfile/c.jpg"></a></div>
</div>
</div>

Flash效果一

<div class="ui-carousel" data-arrow="false" data-time="5" data-way="fade" data-flash="true">
<div class="ui-carousel-inner">
<div class="ui-carousel-item active"><a><img src="/upfile/a.jpg" data-title="每个人都有一个死角, 自己走不出来,别人也闯不进去。111111" /></a></div>
<div class="ui-carousel-item"><a><img src="/upfile/b.jpg" data-title="我把最深沉的秘密放在那里。22222" /></a></div>
<div class="ui-carousel-item"><a><img src="/upfile/c.jpg" data-title="每个人都有一道伤口, 或深或浅,盖上布,以为不存在。33333" /></a></div>
</div>
</div>

Flash效果二

<div class="ui-carousel" data-arrow="false" data-time="3" data-page="true">
<div class="ui-carousel-inner">
<div class="ui-carousel-item active"><a><img src="/upfile/a.jpg" /></a></div>
<div class="ui-carousel-item"><a><img src="/upfile/b.jpg" /></a></div>
<div class="ui-carousel-item"><a><img src="/upfile/c.jpg" /></a></div>
</div>
</div>

参数说明

参数 说明
data-arrow 是否显示左右箭头
data-time 轮播时间间隔,单位:秒
data-way 轮播方式,默认左右切换,fade:为淡入淡出
data-flash flash模式,通常用于内部图片切换