卡片 · card-slide 轮播
卡片家族
索引
base
cpanel
crumb
full
page
border
radius
api
artic
namecode
imgs
tips
total
default
box
checkbox
form
form-item
form-inpselect
table
pager
multipled
menubar
mode
menus
tabmenu
code
json
template
tab
slide
paginate
tree
toggle
marquee
timeaxis
waterfall
popup
nav
chatbox
drag
choose
progress
roll
轮播卡
card-slide:图片/幻灯片容器——body 用 :before 撑开宽高比(15 种比例类 slide-16x9 …),图片绝对铺满;foot 内置 slide-prev / slide-next 箭头(kuoqi 字形)与缩略条 slide-slidebar。切换由引擎驱动。
结构
<div class="card card-slide slide-16x9">
<div class="card-head">标题</div>
<div class="card-body">
<div data-img="图片地址">图1描述</div>
<div data-img="图片地址">图2描述</div>
</div>
<div class="card-foot">
<span class="slide-prev"></span>
<span class="slide-slidebar"><span class="slide-slidebar-btn show"></span></span>
<span class="slide-next"></span>
</div>
</div>
| card-body > div[data-img] | 一帧一图:引擎装填图片并轮播 |
| slide-prev / slide-next | 左右箭头,kuoqi 字体方向符,hover 主色底 |
| slide-slidebar-btn.show | 激活缩略点,数量随帧数生成 |
| data-* / 参数 | 轮播间隔、循环等由引擎参数接管 |
比例类速查
横排:
slide-1x1 16x11 16x9 4x3 2x1 25x12 20x9 16x7 8x3 3x1 4x1 5x1 6x1
竖排:slide-3x4 5x7 9x16
注意: 引擎会自动初始化任何
.card-slide 并开启轮播,本站详情页统一用代码块展示,避免页面内自动滚动。
KuoqiUI v2.00 · 离线静态文档 · 界面基于 KuoqiUI ·
返回首页