Team Carousel

An interactive 3D carousel component for displaying team members with smooth animations, keyboard/touch navigation, and extensive customization options.

...

How to Import

Add this import to your component file

app/page.tsx

1import { TeamCarousel } from "@/components/lightswind/team-carousel"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

members	TeamMember[]	-	Array of team member objects with id, name, role, image, and optional bio	Required
cardWidth	number	-	Width of each card in pixels	Optional
cardHeight	number	-	Height of each card in pixels	Optional
autoPlay	number	-	Auto-play interval in milliseconds (0 to disable)	Optional
showArrows	boolean	-	Show navigation arrows	Required
showDots	boolean	-	Show dot indicators	Required

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { TeamCarousel } from '@/components/lightswind/team-carousel';
2
3const teamMembers = [
4  {
5    id: "1",
6    name: "Emily Kim",
7    role: "Founder",
8    image: "https://example.com/emily.jpg",
9    bio: "Visionary leader with 10+ years of experience."
10  },
11  // ... more members
12];
13
14function TeamPage() {
15  return (
16    <TeamCarousel 
17      members={teamMembers}
18      autoPlay={3000}
19      onMemberChange={(member, index) => {
20        console.log('Active member:', member.name);
21      }}
22    />
23  );
24}

Previousstack-list

Nextterminal-card

A product byＭＵＨＩＬＡＮ and Team❤️.

Team Carousel

An interactive 3D carousel component for displaying team members with smooth animations, keyboard/touch navigation, and extensive customization options.

...

How to Import

Add this import to your component file

app/page.tsx

1import { TeamCarousel } from "@/components/lightswind/team-carousel"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

members	TeamMember[]	-	Array of team member objects with id, name, role, image, and optional bio	Required
cardWidth	number	-	Width of each card in pixels	Optional
cardHeight	number	-	Height of each card in pixels	Optional
autoPlay	number	-	Auto-play interval in milliseconds (0 to disable)	Optional
showArrows	boolean	-	Show navigation arrows	Required
showDots	boolean	-	Show dot indicators	Required

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { TeamCarousel } from '@/components/lightswind/team-carousel';
2
3const teamMembers = [
4  {
5    id: "1",
6    name: "Emily Kim",
7    role: "Founder",
8    image: "https://example.com/emily.jpg",
9    bio: "Visionary leader with 10+ years of experience."
10  },
11  // ... more members
12];
13
14function TeamPage() {
15  return (
16    <TeamCarousel 
17      members={teamMembers}
18      autoPlay={3000}
19      onMemberChange={(member, index) => {
20        console.log('Active member:', member.name);
21      }}
22    />
23  );
24}

Previousstack-list

Nextterminal-card

A product byＭＵＨＩＬＡＮ and Team❤️.

Team Carousel

How to Import

Props

Basic Usage

On This Page

Contribute

Team Carousel

How to Import

Props

Basic Usage

On This Page

Contribute

React Team Carousel Component - Lightswind UI

Key Details of React Team Carousel

Team Carousel

How to Import

Props

Basic Usage

On This Page

Contribute

Team Carousel

How to Import

Props

Basic Usage

On This Page

Contribute