青梧 UI — 中国历法组件库

Carousel 轮播图

左侧大图 + 右侧卡片文案 + 底部缩略图（右对齐至左图右缘）；背景从左往右滑入、角色随后淡入上移，文案逐行从右往左滑入；移动端支持触屏横滑切换，缩略图可切换为悬浮胶囊。

自动播放速度间隔 3800ms循环左右箭头缩略图悬浮缩略图（≤560px）实际播放间隔 = 3800ms ÷ 1× = 3800ms（下限 250ms）

import { Carousel, type CarouselItem } from "@qingwu-ui/carousel";
import "@qingwu-ui/carousel/style.css";
import { useEffect, useRef } from "react";

const ITEMS: CarouselItem[] = [
  { value: "01", title: "晨光", image: "/hero.png" },
  // ...
];

export default function HeroCarousel() {
  const rootRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!rootRef.current) return;
    const carousel = new Carousel(rootRef.current, {
      items: ITEMS,
      defaultValue: "01",
      autoplay: true,
      interval: 3800,
      speed: 1, // 倍速：实际间隔 = interval / speed（下限 250ms）
      loop: true,
      showArrows: true,
      showThumbs: true,
    });
    return () => carousel.destroy();
  }, []);

  return <div ref={rootRef} />;
}