轮播展示 Slideshow

概览

FeatureSlideshow 结合了 Framer Motion 动画，通过点击或自动切换，在不同步骤/特性间进行平滑过渡。

实时预览

快速上手

✓

安装包

使用 pnpm add @goenhance/cms-ui 进行安装。

2

引入预设

在 tailwind.js 中添加我们提供的 preset。

3

引入预设

在 tailwind.js 中添加我们提供的 preset。

4

引入预设

在 tailwind.js 中添加我们提供的 preset。

5

引入预设

在 tailwind.js 中添加我们提供的 preset。

6

引入预设

在 tailwind.js 中添加我们提供的 preset。

7

引入预设

在 tailwind.js 中添加我们提供的 preset。

使用方法

import { FeatureSlideshow } from '@goenhance/cms-ui';

const Example = () => (
  <FeatureSlideshow
    title="简单流程"
    list={[
      { title: "第一步", description: "...", mediaUrl: "..." }
    ]}
  />
);

属性说明 (Props)

属性	类型	默认值	说明
title	string	”How to get Started”	组件顶部标题
list	FeatureSlideshowItem[]	[]	切换项列表
autoPlayInterval	number	3000	自动切换间隔 (ms)

特性

• 进度可视：左侧带有数字序列和完成状态标记（打钩）。
• 动效丝滑：媒体切换时使用 y 轴位移和缩放过渡。
• 交互友好：支持手动点击左侧项快速跳转，并自动重置计时器。