轮播展示 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 轴位移和缩放过渡。
• 交互友好：支持手动点击左侧项快速跳转，并自动重置计时器。

---

主题覆盖

可覆盖变量

类名：mewx-cms-feature-slideshow

变量名	用途	默认值
--mewx-cms-slideshow-heading-text	标题文字色	var(--blocks-text-heading)
--mewx-cms-slideshow-item-active-bg	激活项背景	var(--blocks-primary-lightest)
--mewx-cms-slideshow-item-active-border	激活项边框	var(--blocks-primary-lighter)
--mewx-cms-slideshow-item-hover-bg	悬停项背景	var(--blocks-bg-section)
--mewx-cms-slideshow-item-active-text	激活项文字色	var(--blocks-primary-dark)
--mewx-cms-slideshow-item-inactive-text	非激活项文字色	var(--blocks-text-muted)
--mewx-cms-slideshow-circle-active-bg	激活圆圈背景	var(--blocks-primary)
--mewx-cms-slideshow-circle-active-border	激活圆圈边框	var(--blocks-primary)
--mewx-cms-slideshow-circle-active-text	激活圆圈文字色	255 255 255
--mewx-cms-slideshow-circle-inactive-bg	非激活圆圈背景	var(--blocks-bg-card)
--mewx-cms-slideshow-circle-inactive-border	非激活圆圈边框	var(--blocks-border)
--mewx-cms-slideshow-circle-inactive-text	非激活圆圈文字色	var(--blocks-text-light)
--mewx-cms-slideshow-focus-ring	焦点环颜色	var(--blocks-primary)

覆盖示例

/* 紫色幻灯片 */
.purple-slideshow {
  --mewx-cms-slideshow-circle-active-bg: 139 92 246;
  --mewx-cms-slideshow-circle-active-border: 139 92 246;
  --mewx-cms-slideshow-item-active-bg: 237 233 254;
  --mewx-cms-slideshow-item-active-border: 196 181 253;
  --mewx-cms-slideshow-focus-ring: 139 92 246;
}

<FeatureSlideshow className="purple-slideshow" title="快速上手" list={[...]} />