1. 首页
  2. 卡片 Card
  3. card-slide 轮播

卡片 · card-slide 轮播

轮播卡 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 · 返回首页