特性轮播 FeatureCarousel

概览

FeatureCarousel 用于以轮播形式展示产品的一系列特性，支持点击切换、自动轮播等交互效果。

实时预览

Anime Filter

30+ Different Anime Filter to Choose From

Disney

经典迪士尼动画风格，温馨可爱的视觉效果。

Chibi Anime

Q版动漫风格，萌系可爱的人物形象。

Cartoon

卡通漫画风格，色彩鲜艳的艺术效果。

Studio Ghibli

宫崎骏电影风格，唯美细腻的画面质感。

Snoopy

史努比漫画风格，简约线条的趣味表现。

使用方法

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

const Example = () => (
  <FeatureCarousel
    subtitle="特性展示"
    title="多样化的风格选择"
    list={[
      { title: "风格1", description: "描述...", icon: "..." },
      { title: "风格2", description: "描述...", icon: "..." }
    ]}
  />
);

属性说明 (Props)

属性	类型	默认值	说明
`title`	`string`	-	主标题
`subtitle`	`string`	-	顶部小字副标题
`list`	`FeatureListItem[]`	`[]`	特性列表项

FeatureListItem

属性	类型	说明
`title`	`string`	特性标题
`description`	`string`	特性描述文本
`icon`	`string`	图标或图片 URL

特性

交互式轮播：点击指示器或卡片切换当前展示项。
渐变背景：柔和的渐变色背景，增强视觉层次。
缩放动效：当前激活项放大显示，其他项缩小淡出。
多行展示：超过5项时，额外项会以网格形式展示在下方。
响应式设计：自动适配移动端和桌面端布局。

主题覆盖

可覆盖变量

类名：mewx-cms-feature-carousel

变量名	用途	默认值
`--mewx-cms-carousel-grid-color`	网格装饰色	`var(--blocks-primary-lighter)`
`--mewx-cms-carousel-subtitle-bg`	副标题背景	`var(--blocks-bg-card)`
`--mewx-cms-carousel-subtitle-border`	副标题边框	`var(--blocks-border)`
`--mewx-cms-carousel-heading-text`	标题文字色	`var(--blocks-text-heading)`
`--mewx-cms-carousel-muted-text`	描述文字色	`var(--blocks-text-muted)`
`--mewx-cms-carousel-shadow-active`	激活卡片阴影	`var(--blocks-shadow-lg)`
`--mewx-cms-carousel-shadow`	默认卡片阴影	`var(--blocks-shadow-md)`
`--mewx-cms-carousel-media-bg`	媒体区背景	`var(--blocks-bg-section)`
`--mewx-cms-carousel-card-bg`	卡片背景	`var(--blocks-bg-card)`
`--mewx-cms-carousel-nav-bg`	导航按钮背景	`var(--blocks-bg-card)`
`--mewx-cms-carousel-nav-hover-bg`	导航按钮悬停背景	`var(--blocks-bg-section)`
`--mewx-cms-carousel-nav-border`	导航按钮边框	`var(--blocks-border)`
`--mewx-cms-carousel-nav-hover-border`	导航按钮悬停边框	`var(--blocks-primary)`
`--mewx-cms-carousel-nav-icon-color`	导航图标色	`var(--blocks-text-muted)`
`--mewx-cms-carousel-nav-icon-hover-color`	导航图标悬停色	`var(--blocks-primary)`
`--mewx-cms-carousel-indicator-active`	指示器激活色	`var(--blocks-primary)`
`--mewx-cms-carousel-indicator-inactive`	指示器默认色	`var(--blocks-border)`
`--mewx-cms-carousel-indicator-hover`	指示器悬停色	`var(--blocks-text-muted)`

覆盖示例

/* 紫色主题轮播 */
.purple-carousel {
  --mewx-cms-carousel-grid-color: 196 181 253;
  --mewx-cms-carousel-indicator-active: 139 92 246;
  --mewx-cms-carousel-nav-hover-border: 139 92 246;
  --mewx-cms-carousel-nav-icon-hover-color: 139 92 246;
}

<FeatureCarousel className="purple-carousel" title="特性展示" subtitle="轮播" list={[...]} />