轮播

carousel

与 behaviors/carousel 配套：箭头 / 自动圆点 / 循环切换（三张色块幻灯）。

示例

第一张 · 陶土橙

第二张 · 青绿过渡

第三张 · 冷蓝回暖

<div class="carousel">
  <div class="carousel-track">
    <div class="carousel-slide"><div style="height:170px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--token-accent),var(--token-accent-deep));color:#fff">第一张 · 陶土橙</div></div>
    <div class="carousel-slide"><div style="height:170px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--token-success),var(--token-info));color:#fff">第二张 · 青绿过渡</div></div>
    <div class="carousel-slide"><div style="height:170px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--token-accent-cold),var(--token-accent));color:#fff">第三张 · 冷蓝回暖</div></div>
  </div>
  <button class="carousel-arrow carousel-arrow--prev" type="button" aria-label="上一张"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg></button>
  <button class="carousel-arrow carousel-arrow--next" type="button" aria-label="下一张"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></button>
  <div class="carousel-dots"></div>
</div>

安装

bun add @icen.ai/ui
import '@icen.ai/ui/components/media.css';

用法

import { initCarousel } from '@icen.ai/ui/behaviors/carousel';
initCarousel();
// dots 自动生成；首尾循环；当前 dot 挂 .active