Team Carousel
An elegant carousel component for showcasing team members with navigation controls and auto-play.
Configuring your account...
Please wait while we prepare everything for you
Usage
import TeamCarousel from '@/components/bynanaui/team-carousel'
<TeamCarousel
title="Tech Pioneers"
subtitle="building the future"
description="We bring together brilliant developers, engineers, and tech innovators to create groundbreaking digital solutions."
members={[
{
name: "Emily Rodriguez",
role: "Product Manager",
experience: "6+ years of experience",
avatar: "https://i.pravatar.cc/160?img=1"
}
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Tech Pioneers" | Main heading text |
subtitle | string | "building the future" | Subtitle text |
description | string | Default description | Description text |
members | Array<Person> | Default members array | Array of team members |
className | string | "" | Additional CSS classes |
Person Type
| Property | Type | Description |
|---|---|---|
name | string | Team member's name |
role | string | Job title or role |
experience | string | Experience description |
avatar | string | Profile image URL |
Features
- Auto-play Carousel: Automatically advances every 5 seconds
- Navigation Controls: Previous/next buttons with disabled states
- Responsive Design: Shows 3 cards on desktop, adapts on mobile
- Smooth Transitions: Spring-based animations for card movement
- Interactive Controls: Pause auto-play when manually navigating
- Card Layout: Clean card design with avatar, name, role, and experience