Syncfusion React Carousel

You're getting a comprehensive implementation guide for Syncfusion's React Carousel component, covering everything from basic image galleries to product carousels and testimonial sliders. The skill walks through four indicator types (dots, fractions, progress bars), animation effects, auto-play configuration, and keyboard navigation with full WCAG 2.2 compliance. It includes practical sections on data binding, custom templates, and even WebP optimization for performance. Use this when you need more than a basic slideshow and want features like partial visible slides, pause on hover, or swipe gestures out of the box. The documentation is thorough, maybe more than you need for simple cases, but that's the point if you're building something production-ready with accessibility requirements.

skills.sh installs: 682
GitHub stars: 3
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add syncfusion/react-ui-components-skills --skill syncfusion-react-carousel --agent claude-code

Installs into .claude/skills of the current project.

Files

Implementing the Syncfusion React Carousel Component

Overview
Getting Started
Populating Items and Selection
Navigation and Indicators
Animations and Transitions
API Properties
API Methods
API Events
Styling and Appearance
Accessibility
Image Optimization
Common Patterns
Use Cases

The Syncfusion React Carousel component is a powerful, fully-featured carousel for displaying images, content, or any sequential items with automatic or manual transitions. It supports multiple animation effects, customizable indicators and navigators, keyboard navigation, and comprehensive accessibility features.