FeatureCarousel

简介

FeatureCarousel 组件是一个特性轮播组件，用于横向滑动展示多个特性卡片。它提供了流畅的滚动体验和导航控制，适用于产品特性展示、功能亮点介绍等场景。

组件特性：

横向滚动展示 - 支持水平滚动浏览多个特性卡片
导航控制 - 提供左右导航按钮和键盘控制
响应式设计 - 适配不同屏幕尺寸
流畅动画 - 平滑的滚动和悬停效果
自定义样式 - 支持自定义背景和文字颜色

案例

性能和电池续航

跑得快,跑得久。

Mac 和 iPhone

梦幻好队友。

兼容性

各种常用 App, Mac 都能跑。

Props

class

自定义CSS类名，用于覆盖默认样式。

性能和电池续航

跑得快,跑得久。

Mac 和 iPhone

梦幻好队友。

性能和电池续航

跑得快,跑得久。

Mac 和 iPhone

梦幻好队友。

---



import { FeatureCarousel, getProductImage } from "@coffic/cosy-ui";
---

<FeatureCarousel
  features={[
    {
      title: '性能和电池续航',
      description: '跑得快,跑得久。',
      background: 'linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%)',
      textColor: 'white',
    },
    {
      title: 'Mac 和 iPhone',
      description: '梦幻好队友。',
      background: '#a7f3d0',
      textColor: 'dark',
    },
  ]}
/>

---



import { FeatureCarousel, getProductImage } from "@coffic/cosy-ui";
---

<FeatureCarousel
  class="cosy:border-2 cosy:border-primary cosy:rounded-xl"
  features={[
    {
      title: '性能和电池续航',
      description: '跑得快,跑得久。',
      background: 'linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%)',
      textColor: 'white',
    },
    {
      title: 'Mac 和 iPhone',
      description: '梦幻好队友。',
      background: '#a7f3d0',
      textColor: 'dark',
    },
  ]}
/>

features

特性数据数组，每个特性包含标题、描述、背景等信息。

性能和电池续航

跑得快,跑得久。

Mac 和 iPhone

梦幻好队友。

创新设计

每一处细节, 都经过精心设计。

隐私和安全

你的私事, 只关你的事。

专业创作

让创意, 无界限。

智能助手

AI 让一切更简单。

未来科技

今天, 就是未来。

---



import { FeatureCarousel } from "@coffic/cosy-ui";
---

<FeatureCarousel
  features={[
    {
      title: '性能和电池续航',
      description: '跑得快,跑得久。',
      background: 'linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%)',
      textColor: 'white',
    },
    {
      title: 'Mac 和 iPhone',
      description: '梦幻好队友。',
      background: '#a7f3d0',
      textColor: 'dark',
    },
  ]}
/>

---



import { FeatureCarousel, getProductImage } from "@coffic/cosy-ui";
---

<FeatureCarousel
  features={[
    {
      title: '创新设计',
      description: '每一处细节, 都经过精心设计。',
      background: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
      image: getProductImage({
        width: 400,
        height: 300,
        tag: 'design-aesthetics',
        provider: 'picsum',
      }),
      textColor: 'white',
    },
    {
      title: '隐私和安全',
      description: '你的私事, 只关你的事。',
      background: 'linear-gradient(135deg, #ef4444 0%, #7c3aed 100%)',
      image: getProductImage({
        width: 400,
        height: 300,
        tag: 'security-lock',
        provider: 'picsum',
      }),
      textColor: 'white',
    },
  ]}
/>

---



import { FeatureCarousel } from "@coffic/cosy-ui";
---

<FeatureCarousel
  features={[
    {
      title: "专业创作",
      description: "让创意, 无界限。",
      background: "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)",
      textColor: "white",
    },
    {
      title: "智能助手",
      description: "AI 让一切更简单。",
      background: "linear-gradient(135deg, #06b6d4 0%, #0891b2 100%)",
      textColor: "white",
    },
    {
      title: "未来科技",
      description: "今天, 就是未来。",
      background: "linear-gradient(135deg, #6366f1 0%, #4f46e5 100%)",
      textColor: "white",
    },
  ]}
/>