# syncfusion-react-carousel

This skill guides an agent through a Syncfusion React carousel with slides, controls, transitions, and accessibility. Use it for galleries, product displays, or slideshows.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 657 installs · ★ 3
- Author: Syncfusion Inc
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-carousel/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/syncfusion-react-carousel

## What it does

The skill covers the main Carousel workflow in React: defining items, choosing the starting slide, and adding navigation buttons or indicators. It also explains autoplay, hover pausing, looping, swipe input, and Fade or Slide transitions. Component properties, methods, and events are included.

Other sections cover CSS styling, themes, dark mode, ARIA support, keyboard controls, and screen readers. The examples use `CarouselComponent`, `CarouselItemsDirective`, and `CarouselItemDirective` from `@syncfusion/ej2-react-navigations`. Without that package, the example imports will not build in the React project.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-carousel -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/syncfusion-react-carousel/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-carousel/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-carousel -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/syncfusion-react-carousel/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-carousel -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/syncfusion-react-carousel/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install syncfusion/react-ui-components-skills syncfusion-react-carousel
```

2. **Manually: put the files in place**
- File: `.github/skills/syncfusion-react-carousel/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-carousel -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-carousel
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/syncfusion-react-carousel/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-carousel -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-carousel/SKILL.md

## When to use it
- build a rotating image gallery in React
- configure carousel buttons and indicators
- add autoplay with slide transitions
- bind slide content to application data
- support keyboard and ARIA navigation

## Example prompts
- Use the `syncfusion-react-carousel` skill to add a product carousel to my React project with controls, indicators, and autoplay.
- Configure slides with `CarouselItemDirective`, select the opening item, and use a Fade transition.
- Create an accessible image carousel with keyboard controls and swipe navigation.

## Similar
- [cuboid-carousel](https://affpapa.org/en/nevibecode/skills/cuboid-carousel.md) — skill · 10000 installs
- [carousel-writer-sms](https://affpapa.org/en/nevibecode/skills/carousel-writer-sms.md) — skill · 2300 installs
- [instagram-carousel](https://affpapa.org/en/nevibecode/skills/instagram-carousel.md) — skill · 817 installs
- [carousel-writer](https://affpapa.org/en/nevibecode/skills/carousel-writer.md) — skill · 755 installs
- [ig-carousel](https://affpapa.org/en/nevibecode/skills/ig-carousel.md) — skill · 493 installs
- [vercel-react-native-skills](https://affpapa.org/en/nevibecode/skills/vercel-react-native-skills.md) — skill · 255200 installs

From the same set: [syncfusion/react-ui-components-skills](https://affpapa.org/en/nevibecode/by/syncfusion/react-ui-components-skills.md) — 57 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md