拖甩照片卡片

点按或甩动最前面的照片，让它退到队尾，其余卡片顺势前移。

卡片交互六框架TypeScript

演示

点按或甩动最前面的卡片，也可用 Enter 或空格切换。勾选 Auto 开启自动切换。

npm install react react-dom

将代码包中的四个文件放在同一目录。样式和字体已包含，由所选框架的构建工具编译入口文件。

上方安装命令会自动添加这些依赖。如果手动复制源码，请自行安装。

npm install react react-dom

CardSwap.tsx

正在加载代码…

App.tsx

import { CardSwap } from "./CardSwap";

export default function App() {
  return <CardSwap />;
}

共用原生核心处理交互，各框架独立挂载、更新和销毁实例。

正在加载提示词…

属性	类型	默认值
`options.auto` 卡片组可见且没有交互时自动切换。	`boolean`	`false`
`options.every` 自动切换间隔（秒），最小 1.5。	`number`	`4`
`options.cards` 四张照片卡片，每张包含标题和图片地址。默认照片已内嵌。	`{ title: string; src: string }[]`
`options.height` 场景的建议高度，内容较多时布局会相应延展。	`number`	`420`
`options.reducedMotion` 覆盖系统的减少动态效果偏好，同时保留完整交互状态。	`boolean`