特性轮播 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项时，额外项会以网格形式展示在下方。
• 响应式设计：自动适配移动端和桌面端布局。