FeatureCarousel

Introduction

The FeatureCarousel component is a feature carousel component for horizontally scrolling through multiple feature cards. It provides smooth scrolling experience and navigation controls, perfect for product feature showcases, functionality highlights, and similar scenarios.

Component features:

Horizontal Scroll Display - Supports horizontal scrolling to browse multiple feature cards
Navigation Controls - Provides left/right navigation buttons and keyboard controls
Responsive Design - Adapts to different screen sizes
Smooth Animations - Smooth scrolling and hover effects
Custom Styling - Supports custom backgrounds and text colors

Examples

性能和电池续航

跑得快,跑得久。

Mac 和 iPhone

梦幻好队友。

兼容性

各种常用 App, Mac 都能跑。

Props

class

Custom CSS class name for overriding default styles.

性能和电池续航

跑得快,跑得久。

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

Array of feature data, each feature contains title, description, background, and other information.

性能和电池续航

跑得快,跑得久。

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",
    },
  ]}
/>