组件

OneCarousel

OneCarousel 用平移轨道展示图片列表；默认开启循环与指示点，当前索引支持受控与非受控模式。

城市天际线

查看代码收起代码

import { OneCarousel, type OneCarouselChangeEvent } from '@geektech/one';

const carousel = new OneCarousel({
  autoplay: true,
  interval: 3000,
  items: [
    { src: '/banner-1.png', alt: '城市天际线', caption: '天际线' },
    { src: '/banner-2.png', alt: '海港日落' },
  ],
});
carousel.on('change', (payload) => {
  const event = payload as OneCarouselChangeEvent;
  console.log(event.value);
});

自动播放

autoplay 开启后按 interval 自动前进（默认 4000ms）；pauseOnHover 悬停暂停（默认开启），非循环模式播完最后一张后停止。

键盘导航

轮播区域可聚焦，ArrowLeft/ArrowRight 切换上一张/下一张，Home/End 跳转首尾。

ARIA

容器使用 role=region 与 aria-roledescription=carousel；每张幻灯片为 role=group，非当前项通过 aria-hidden 隐藏；指示点通过 aria-current 表达选中。

API

OneCarousel 属性与事件
名称	签名	说明
`items`	`items: readonly OneCarouselItem[]`	图片项：src 必填，可选 alt 与 caption。
`value`	`value?: number`	受控当前索引。
`defaultValue`	`defaultValue?: number`	非受控初始索引。
`autoplay`	`autoplay?: boolean`	自动播放，默认关闭。
`interval`	`interval?: number`	自动播放间隔毫秒，默认 4000。
`pauseOnHover`	`pauseOnHover?: boolean`	悬停暂停自动播放，默认开启。
`loop`	`loop?: boolean`	循环播放，默认开启；关闭后边界箭头禁用。
`showArrows`	`showArrows?: boolean`	显示左右箭头，默认开启。
`showDots`	`showDots?: boolean`	显示指示点，默认开启。
`height`	`height?: string`	轮播高度，默认 240px。
`ariaLabel`	`ariaLabel?: string`	轮播区域的可访问名称。
`change`	`(event: OneCarouselChangeEvent) => void`	当前索引变化时发出 value: number 与 originalEvent。