syncfusion/react-ui-components-skills
Complete guide to implementing the Syncfusion React Carousel component for rotating image galleries, product carousels, slideshow presentations, testimonials, and sequential content display.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-carousel
Related neighbors and high-traction skills in the same topics — useful to compare before installing.
Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…
810.4K installsDebug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …
568.9K installsPre-deployment validation for Azure readiness. Run deep checks on configuration, infrastructure…
567.7K installsPostgres best practices maintained by Supabase, for Postgres running anywhere. Load this skill …
391.6K installsOther skills from syncfusion/react-ui-components-skills · top by installs.
npx skills add syncfusion/react-ui-components-skills
Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.
master
Parsed from SKILL.md frontmatter.
Files included with this skill beyond the listing page.
SKILL.md
14,143 B
SUMMARY.md
428 B
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.
Implement the Carousel component when you need to:
The Carousel component manages:
Core imports:
import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from "@syncfusion/ej2-react-navigations";📄 Read: [references/getting-started.md](references/getting-started.md)
When to read: First time setting up Carousel or troubleshooting initial setup problems.
📄 Read: [references/populating-items.md](references/populating-items.md)
When to read: Building slide content, handling dynamic data, or implementing navigation controls.
📄 Read: [references/navigators-and-indicators.md](references/navigators-and-indicators.md)
When to read: Customizing navigation UI, changing indicator style, or implementing play controls.
📄 Read: [references/animations-and-transitions.md](references/animations-and-transitions.md)
When to read: Implementing smooth transitions, configuring auto-play, or adding custom animations.
📄 Read: [references/styling-and-appearance.md](references/styling-and-appearance.md)
When to read: Styling indicators/navigators, positioning elements, or creating custom themes.
📄 Read: [references/accessibility.md](references/accessibility.md)
When to read: Building accessible carousels or implementing keyboard navigation.
📄 Read: [references/image-optimization.md](references/image-optimization.md)
When to read: Optimizing carousel performance or implementing modern image formats.
Minimal working carousel with 5 images:
import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from "@syncfusion/ej2-react-navigations";
import * as React from "react";
const App = () => {
return (
<div className='control-container'>
<CarouselComponent>
<CarouselItemsDirective>
<CarouselItemDirective template='<figure class="img-container"><img src="url" alt="cardinal" style="height:100%;width:100%;" /><figcaption class="img-caption">Cardinal</figcaption></figure>' />
<CarouselItemDirective template='<figure class="img-container"><img src="url" alt="kingfisher" style="height:100%;width:100%;" /><figcaption class="img-caption">Kingfisher</figcaption></figure>' />
<CarouselItemDirective template='<figure class="img-container"><img src="url" alt="toucan" style="height:100%;width:100%;" /><figcaption class="img-caption">Toucan</figcaption></figure>' />
<CarouselItemDirective template='<figure class="img-container"><img src="url" alt="warbler" style="height:100%;width:100%;" /><figcaption class="img-caption">Warbler</figcaption></figure>' />
<CarouselItemDirective template='<figure class="img-container"><img src="url" alt="bee-eater" style="height:100%;width:100%;" /><figcaption class="img-caption">Bee-eater</figcaption></figure>' />
</CarouselItemsDirective>
</CarouselComponent>
</div>
);
}
export default App;<CarouselComponent autoPlay={true} showIndicators={true} buttonsVisibility="Visible">
<CarouselItemsDirective>
{/* items */}
</CarouselItemsDirective>
</CarouselComponent>const itemTemplate = (props: any): JSX.Element => {
return <img src={props.imageUrl} alt={props.title} />;
}
<CarouselComponent dataSource={carouselData} itemTemplate={itemTemplate} />const nextButtonTemplate = (props: any): JSX.Element => {
return <ButtonComponent iconCss="e-icons e-chevron-right" />;
}
<CarouselComponent nextButtonTemplate={nextButtonTemplate} /><CarouselComponent
enableTouchSwipe={true}
swipeMode={CarouselSwipeMode.Touch & CarouselSwipeMode.Mouse}
pauseOnHover={true}
>
{/* items */}
</CarouselComponent>Core Display Properties:
dataSource - Bind carousel to external dataitemTemplate - Template for data-bound itemsitems - Collection of CarouselItemModelselectedIndex - Current slide indexAnimation & Behavior:
animationEffect - Animation type (None, Slide, Fade, Custom)interval - Transition delay in milliseconds (default: 5000)autoPlay - Enable auto-play (default: false)loop - Loop slides infinitely (default: true)pauseOnHover - Pause on hover (default: true)enableTouchSwipe - Enable touch swiping (default: true)swipeMode - Touch/mouse swipe modes (Touch, Mouse)UI Controls:
buttonsVisibility - Navigator buttons (Hidden, Visible, VisibleOnHover)showIndicators - Show indicators (default: true)showPlayButton - Show play/pause button (default: false)indicatorsType - Indicator style (Default, Dynamic, Fraction, Progress)Customization:
previousButtonTemplate - Previous button UInextButtonTemplate - Next button UIplayButtonTemplate - Play/pause button UIindicatorsTemplate - Indicators UIcssClass - Custom CSS classespartialVisible - Show adjacent slides (default: false)allowKeyboardInteraction - Keyboard navigation (default: true)Layout & Localization:
height - Component height (pixels/percentage)width - Component width (pixels/percentage)enableRtl - Right-to-left supportenablePersistence - Persist state between reloadslocale - Culture/localization settinghtmlAttributes - Custom HTML attributes1. Product Gallery (E-Commerce)
2. Testimonial/Review Carousel
3. Accessible Banner Carousel
4. Styled Hero Carousel
5. Data-Bound Carousel
📄 Read: [references/api-properties.md](references/api-properties.md)
Comprehensive documentation for all 28+ carousel properties organized by functionality:
Each property includes type information, default values, and practical code examples.
📄 Read: [references/api-methods.md](references/api-methods.md)
Complete documentation for all carousel control methods:
next() - Navigate to next slide with loop supportprev() - Navigate to previous slide with loop supportgetHostElement() - Access underlying carousel DOM elementIncludes method signatures, use cases, practical examples, and advanced patterns like skip multiple slides, go to specific slide, and scroll-to-carousel functionality.
📄 Read: [references/api-events.md](references/api-events.md)
Comprehensive event documentation with complete event arguments:
slideChanging - Fires BEFORE transition (cancelable)- Arguments: cancel, currentIndex, currentSlide, nextIndex, nextSlide, isSwiped, name, slideDirection - Use cases: Validation, confirmation dialogs, preventing access to specific slides
slideChanged - Fires AFTER transition (not cancelable)- Arguments: currentIndex, currentSlide, previousIndex, previousSlide, isSwiped, name, slideDirection - Use cases: Analytics tracking, updating UI counters, loading content, triggering animations
Includes practical examples for rate limiting, history tracking, analytics integration, and event pattern library.