use-gesture 图片轮播

将拖拽手势与弹簧动画组合成可自动播放的图片轮播。

交互演示 React

亲手试一试，更容易理解。

在当前页面运行 use-gesture 图片轮播的交互示例。

交互指南

点击本页的“运行演示”，或在独立窗口中体验示例。也可在 src 下的页面中直接挂载现有演示：

tsx

import Example from "./third-party-lib/use-gestrue/GestureDemo";

export default function ExamplePage() {
  return <Example />;
}

名称	类型或形式	说明
`useDrag`	Hook	读取 movement、direction 和 active
`useSprings`	Hook	驱动每页位移与缩放
`activeIndex`	number	当前页索引
`pages`	string[]	示例图片 URL 列表

图片依赖外部网络。组件目前没有对外配置接口，自动轮播间隔在源文件中固定为 3000 毫秒。