Implementing the Syncfusion React Carousel Component Table of Contents - 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,…

, '.webp') }\n```\n\n## Responsive Image Optimization\n\n### Different Resolutions for Different Devices\n\n```tsx\nconst itemTemplate = (props: any): JSX.Element => {\n return (\n \u003cfigure className=\"img-container\">\n \u003cpicture>\n {/* Desktop (1920px) */}\n \u003csource \n media=\"(min-width: 1200px)\"\n srcSet={props.webpLarge} \n type=\"image/webp\" \n />\n \u003csource \n media=\"(min-width: 1200px)\"\n srcSet={props.jpegLarge} \n />\n \n {/* Tablet (768px) */}\n \u003csource \n media=\"(min-width: 768px)\"\n srcSet={props.webpMedium} \n type=\"image/webp\" \n />\n \u003csource \n media=\"(min-width: 768px)\"\n srcSet={props.jpegMedium} \n />\n \n {/* Mobile (default) */}\n \u003csource srcSet={props.webpSmall} type=\"image/webp\" />\n \u003cimg \n src={props.jpegSmall} \n alt={props.title}\n style={{ height: '100%', width: '100%' }}\n />\n \u003c/picture>\n \u003cfigcaption className=\"img-caption\">{props.title}\u003c/figcaption>\n \u003c/figure>\n );\n}\n\nconst carouselData = [\n {\n title: \"Mountain\",\n webpSmall: \"/images/mountain-400w.webp\",\n jpegSmall: \"/images/mountain-400w.jpg\",\n webpMedium: \"/images/mountain-800w.webp\",\n jpegMedium: \"/images/mountain-800w.jpg\",\n webpLarge: \"/images/mountain-1200w.webp\",\n jpegLarge: \"/images/mountain-1200w.jpg\"\n }\n];\n\nreturn (\n \u003cCarouselComponent \n dataSource={carouselData} \n itemTemplate={itemTemplate}\n />\n);\n```\n\n## Lazy Loading Images\n\nImprove initial page load by lazy-loading carousel images:\n\n```tsx\nimport { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from \"@syncfusion/ej2-react-navigations\";\nimport * as React from \"react\";\n\nconst App = () => {\n const itemTemplate = (props: any): JSX.Element => {\n return (\n \u003cfigure className=\"img-container\">\n \u003cimg \n src={props.imageUrl}\n alt={props.title}\n loading=\"lazy\" // Enable lazy loading\n style={{ height: '100%', width: '100%' }}\n />\n \u003cfigcaption className=\"img-caption\">{props.title}\u003c/figcaption>\n \u003c/figure>\n );\n }\n\n const carouselData = [\n { title: \"Image 1\", imageUrl: \"/images/img1.webp\" },\n { title: \"Image 2\", imageUrl: \"/images/img2.webp\" },\n { title: \"Image 3\", imageUrl: \"/images/img3.webp\" }\n ];\n\n return (\n \u003cCarouselComponent \n dataSource={carouselData} \n itemTemplate={itemTemplate}\n />\n );\n}\n\nexport default App;\n```\n\n**Note:** Lazy loading works best with auto-play disabled or slow intervals, as users may not see preloaded images.\n\n## Image Compression Best Practices\n\n### Quality Settings\n\n| Quality | Use Case | File Size |\n|---------|----------|-----------|\n| 85-95 | Photography, high detail | Larger |\n| 75-85 | General web use | Medium |\n| 65-75 | Thumbnails, backgrounds | Smaller |\n| \u003c65 | Not recommended | Too small |\n\n### Recommended Workflow\n\n1. **Original image:** High resolution PNG or TIFF\n2. **Convert to JPEG:** Optimize at quality 85\n3. **Convert to WebP:** Optimize at quality 75-80\n4. **Deploy:** Use `\u003cpicture>` with WebP + JPEG fallback\n\n### Example Script\n\n```bash\n#!/bin/bash\n# Optimize all images in images/ folder\n\nfor img in images/*.jpg; do\n # Create WebP version\n cwebp -q 78 \"$img\" -o \"${img%.jpg}.webp\"\n \n # Create compressed JPEG version\n ffmpeg -i \"$img\" -q:v 2 \"${img%.jpg}-opt.jpg\"\ndone\n\necho \"Optimization complete!\"\n```\n\n## Testing Image Performance\n\n### Browser DevTools\n\n1. Open DevTools (F12)\n2. Go to Network tab\n3. Check:\n - **File size:** Should be \u003c100 KB per image\n - **Load time:** Should be \u003c500ms per image\n - **Format:** Should show WebP for modern browsers\n\n### Lighthouse Audit\n\n1. Open DevTools → Lighthouse\n2. Run Audit\n3. Check \"Opportunities\" for image optimization suggestions\n\n### WebPageTest\n\nVisit [webpagetest.org](url) to test carousel performance with your images.\n\n## Browser Support\n\nWebP is supported in all modern browsers:\n- Chrome 23+\n- Firefox 65+\n- Safari 14+\n- Edge 18+\n\n**Legacy support:** Use `\u003cpicture>` element with JPEG fallback for Internet Explorer 11.\n\n## Summary\n\n- **WebP reduces file size by 70%** compared to JPEG\n- Use `\u003cpicture>` element for **automatic fallback** to JPEG\n- Implement **responsive images** for different screen sizes\n- Consider **lazy loading** for large carousels\n- Test with **Lighthouse and WebPageTest** for performance validation\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":9545,"content_sha256":"f070d7064ea41cfab2aa980ac08034f4377c12d26d562c3c1a0cddeae7d9cc9f"},{"filename":"references/navigators-and-indicators.md","content":"# Navigators and Indicators\n\n## Table of Contents\n- [Navigators Overview](#navigators-overview)\n- [Navigator Button Visibility Modes](#navigator-button-visibility-modes)\n- [Custom Navigator Templates](#custom-navigator-templates)\n- [Indicators Overview](#indicators-overview)\n- [Indicator Types](#indicator-types)\n- [Indicator Templates](#indicator-templates)\n- [Play Button Control](#play-button-control)\n\n## Navigators Overview\n\nThe navigators are previous and next buttons that allow users to manually transition between slides. Control their visibility and appearance using the `buttonsVisibility` property and template customization.\n\n## Navigator Button Visibility Modes\n\nThe `buttonsVisibility` property controls when the previous/next buttons appear:\n\n### Mode 1: Always Hidden\n\n```tsx\nimport { CarouselComponent, CarouselItemsDirective, CarouselItemDirective, CarouselButtonVisibility } from \"@syncfusion/ej2-react-navigations\";\nimport * as React from \"react\";\n\nconst App = () => {\n const showButtons: CarouselButtonVisibility = \"Hidden\";\n\n return (\n \u003cdiv className='control-container'>\n \u003cCarouselComponent buttonsVisibility={showButtons}>\n \u003cCarouselItemsDirective>\n \u003cCarouselItemDirective template='\u003ch3>Slide 1\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 2\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 3\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 4\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 5\u003c/h3>' />\n \u003c/CarouselItemsDirective>\n \u003c/CarouselComponent>\n \u003c/div>\n );\n}\n\nexport default App;\n```\n\n### Mode 2: Always Visible\n\n```tsx\nconst showButtons: CarouselButtonVisibility = \"Visible\";\n\nreturn (\n \u003cCarouselComponent buttonsVisibility={showButtons}>\n {/* items */}\n \u003c/CarouselComponent>\n);\n```\n\nButtons remain visible at all times, allowing continuous manual navigation.\n\n### Mode 3: Visible on Hover\n\n```tsx\nconst showButtons: CarouselButtonVisibility = \"VisibleOnHover\";\n\nreturn (\n \u003cCarouselComponent buttonsVisibility={showButtons}>\n {/* items */}\n \u003c/CarouselComponent>\n);\n```\n\nButtons only appear when the user hovers over the carousel, reducing visual clutter on desktop while keeping navigation available on mobile (pseudo-hover).\n\n## Custom Navigator Templates\n\nCustomize the appearance of previous and next buttons using the `previousButtonTemplate` and `nextButtonTemplate` props:\n\n```tsx\nimport { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from \"@syncfusion/ej2-react-navigations\";\nimport { ButtonComponent } from \"@syncfusion/ej2-react-buttons\";\nimport * as React from \"react\";\n\nconst App = () => {\n const previousButtonTemplate = (props: any): JSX.Element => {\n return (\n \u003cButtonComponent \n className=\"e-btn\" \n cssClass=\"e-flat e-round\" \n iconCss=\"e-icons e-chevron-left-double\" \n />\n );\n }\n\n const nextButtonTemplate = (props: any): JSX.Element => {\n return (\n \u003cButtonComponent \n className=\"e-btn\" \n cssClass=\"e-flat e-round\" \n iconCss=\"e-icons e-chevron-right-double\" \n />\n );\n }\n\n return (\n \u003cdiv className='control-container'>\n \u003cCarouselComponent \n previousButtonTemplate={previousButtonTemplate} \n nextButtonTemplate={nextButtonTemplate}\n >\n \u003cCarouselItemsDirective>\n \u003cCarouselItemDirective template='\u003ch3>Slide 1\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 2\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 3\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 4\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 5\u003c/h3>' />\n \u003c/CarouselItemsDirective>\n \u003c/CarouselComponent>\n \u003c/div>\n );\n}\n\nexport default App;\n```\n\n**Available icons:** Use Syncfusion icon classes like `e-chevron-left`, `e-arrow-left`, `e-chevron-right`, `e-arrow-right`, or any custom SVG.\n\n## Indicators Overview\n\nIndicators show the current slide position and allow click-to-navigate to specific slides. Control indicators with `showIndicators` property (default: `true`).\n\n### Show or Hide Indicators\n\n```tsx\n\u003cCarouselComponent showIndicators={true}>\n \u003cCarouselItemsDirective>\n {/* items */}\n \u003c/CarouselItemsDirective>\n\u003c/CarouselComponent>\n```\n\nSet `showIndicators={false}` to hide indicators completely.\n\n## Indicator Types\n\nChoose from four indicator types using the `indicatorsType` property:\n\n### Type 1: Default Indicator\n\nA set of dots representing each slide:\n\n```tsx\n\u003cCarouselComponent indicatorsType=\"Default\">\n \u003cCarouselItemsDirective>\n \u003cCarouselItemDirective template='\u003ch3>Slide 1\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 2\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 3\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 4\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 5\u003c/h3>' />\n \u003c/CarouselItemsDirective>\n\u003c/CarouselComponent>\n```\n\n### Type 2: Dynamic Indicator\n\nDynamically styled dots that visually respond to slide position:\n\n```tsx\n\u003cCarouselComponent indicatorsType=\"Dynamic\">\n \u003cCarouselItemsDirective>\n {/* items */}\n \u003c/CarouselItemsDirective>\n\u003c/CarouselComponent>\n```\n\n### Type 3: Fraction Indicator\n\nDisplays current slide and total count as a fraction (e.g., \"2/5\"):\n\n```tsx\n\u003cCarouselComponent indicatorsType=\"Fraction\">\n \u003cCarouselItemsDirective>\n {/* items */}\n \u003c/CarouselItemsDirective>\n\u003c/CarouselComponent>\n```\n\n### Type 4: Progress Indicator\n\nShows a progress bar representing completion through slides:\n\n```tsx\n\u003cCarouselComponent indicatorsType=\"Progress\">\n \u003cCarouselItemsDirective>\n {/* items */}\n \u003c/CarouselItemsDirective>\n\u003c/CarouselComponent>\n```\n\n## Indicator Templates\n\n### Custom Indicator Template\n\nCustomize indicator appearance using the `indicatorsTemplate` prop:\n\n```tsx\nimport { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from \"@syncfusion/ej2-react-navigations\";\nimport { useMemo } from \"react\";\nimport * as React from \"react\";\n\nconst App = () => {\n const indicatorTemplate = useMemo(() => {\n return (props: any) => \u003cdiv className=\"indicator\" indicator-index={props.index}>\u003c/div>;\n }, []);\n\n return (\n \u003cdiv className='control-container'>\n \u003cCarouselComponent indicatorsTemplate={indicatorTemplate}>\n \u003cCarouselItemsDirective>\n \u003cCarouselItemDirective template='\u003ch3>Slide 1\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 2\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 3\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 4\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 5\u003c/h3>' />\n \u003c/CarouselItemsDirective>\n \u003c/CarouselComponent>\n \u003c/div>\n );\n}\n\nexport default App;\n```\n\n**Template Props:**\n- `props.index` - Zero-based slide index\n\n### Indicator Template with Preview Images\n\nShow thumbnail previews in indicators:\n\n```tsx\nimport { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from \"@syncfusion/ej2-react-navigations\";\nimport { useState } from \"react\";\nimport * as React from \"react\";\n\nconst App = () => {\n const [slides] = useState([\"Slide 1\", \"Slide 2\", \"Slide 3\", \"Slide 4\", \"Slide 5\"]);\n\n const getContent = (index: number) => {\n return slides[index];\n }\n\n const indicatorTemplate = (props: any): JSX.Element => {\n return (\n \u003cdiv className=\"indicator\" indicator-index={props.index}>\n \u003cdiv className=\"preview-content\">{getContent(props.index)}\u003c/div>\n \u003c/div>\n );\n }\n\n return (\n \u003cdiv className=\"control-container\">\n \u003cCarouselComponent indicatorsTemplate={indicatorTemplate}>\n \u003cCarouselItemsDirective>\n \u003cCarouselItemDirective template=\"\u003cdiv class='slide-content'>Slide 1\u003c/div>\" />\n \u003cCarouselItemDirective template=\"\u003cdiv class='slide-content'>Slide 2\u003c/div>\" />\n \u003cCarouselItemDirective template=\"\u003cdiv class='slide-content'>Slide 3\u003c/div>\" />\n \u003cCarouselItemDirective template=\"\u003cdiv class='slide-content'>Slide 4\u003c/div>\" />\n \u003cCarouselItemDirective template=\"\u003cdiv class='slide-content'>Slide 5\u003c/div>\" />\n \u003c/CarouselItemsDirective>\n \u003c/CarouselComponent>\n \u003c/div>\n );\n}\n\nexport default App;\n```\n\n## Play Button Control\n\n### Show or Hide Play Button\n\nThe `showPlayButton` property adds a play/pause button to control auto-play:\n\n```tsx\nimport { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from \"@syncfusion/ej2-react-navigations\";\nimport * as React from \"react\";\n\nconst App = () => {\n return (\n \u003cdiv className='control-container'>\n \u003cCarouselComponent showPlayButton={true}>\n \u003cCarouselItemsDirective>\n \u003cCarouselItemDirective template='\u003ch3>Slide 1\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 2\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 3\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 4\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 5\u003c/h3>' />\n \u003c/CarouselItemsDirective>\n \u003c/CarouselComponent>\n \u003c/div>\n );\n}\n\nexport default App;\n```\n\n**Note:** Requires `buttonsVisibility` to be set (at least \"Visible\" or \"VisibleOnHover\").\n\n### Custom Play Button Template\n\nCustomize the play/pause button:\n\n```tsx\nimport { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from \"@syncfusion/ej2-react-navigations\";\nimport { ButtonComponent } from \"@syncfusion/ej2-react-buttons\";\nimport { useState } from \"react\";\nimport * as React from \"react\";\n\nconst App = () => {\n const [buttonContent, setButtonContent] = useState\u003cstring>('Pause');\n const [autoPlay, setAutoPlay] = useState\u003cboolean>(true);\n\n const btnClick = () => {\n if (autoPlay) {\n setButtonContent('Play');\n setAutoPlay(false);\n } else {\n setButtonContent('Pause');\n setAutoPlay(true);\n }\n }\n\n const playButtonTemplate = (props: any): JSX.Element => {\n return (\n \u003cButtonComponent \n className=\"e-btn\" \n cssClass=\"e-info playBtn\" \n content={buttonContent} \n onClick={btnClick} \n />\n );\n }\n\n return (\n \u003cdiv className='control-container'>\n \u003cCarouselComponent \n showPlayButton={true} \n playButtonTemplate={playButtonTemplate} \n autoPlay={autoPlay}\n >\n \u003cCarouselItemsDirective>\n \u003cCarouselItemDirective template='\u003ch3>Slide 1\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 2\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 3\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 4\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 5\u003c/h3>' />\n \u003c/CarouselItemsDirective>\n \u003c/CarouselComponent>\n \u003c/div>\n );\n}\n\nexport default App;\n```\n\n## Best Practices\n\n- **Desktop:** Use \"VisibleOnHover\" to keep interface clean while providing navigation\n- **Mobile:** Use \"Visible\" since hover doesn't work on touch devices\n- **Accessibility:** Always include either indicators or play button for non-disabled users\n- **Customization:** Templates allow complete UI control while maintaining functionality\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":11048,"content_sha256":"b146fe139402fc6ac3cfab77ecd37f62ea16876863e72cd032204e09856494ce"},{"filename":"references/populating-items.md","content":"# Populating Items and Selection\n\n## Table of Contents\n- [Item Binding with CarouselItem](#item-binding-with-carouselitem)\n- [Data Source Binding](#data-source-binding)\n- [Selection with Property](#selection-with-property)\n- [Selection with Methods](#selection-with-methods)\n- [Partial Visible Slides](#partial-visible-slides)\n\n## Item Binding with CarouselItem\n\nWhen rendering the Carousel with item binding, you can assign individual templates to each item or use a common template. Each item can also have its own transition interval.\n\n### Basic Item Binding\n\nEach `CarouselItemDirective` defines one slide. The `template` prop contains the HTML to render:\n\n```tsx\nimport { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from \"@syncfusion/ej2-react-navigations\";\nimport * as React from \"react\";\n\nconst App = () => {\n return (\n \u003cdiv className='control-container'>\n \u003cCarouselComponent>\n \u003cCarouselItemsDirective>\n \u003cCarouselItemDirective template='\u003cfigure class=\"img-container\">\u003cimg src=\"url\" alt=\"cardinal\" style=\"height:100%;width:100%;\" />\u003cfigcaption class=\"img-caption\">Cardinal\u003c/figcaption>\u003c/figure>' />\n \u003cCarouselItemDirective template='\u003cfigure class=\"img-container\">\u003cimg src=\"url\" alt=\"kingfisher\" style=\"height:100%;width:100%;\" />\u003cfigcaption class=\"img-caption\">Kingfisher\u003c/figcaption>\u003c/figure>' />\n \u003cCarouselItemDirective template='\u003cfigure class=\"img-container\">\u003cimg src=\"url\" alt=\"keel-billed-toucan\" style=\"height:100%;width:100%;\" />\u003cfigcaption class=\"img-caption\">Keel-billed-toucan\u003c/figcaption>\u003c/figure>' />\n \u003cCarouselItemDirective template='\u003cfigure class=\"img-container\">\u003cimg src=\"url\" alt=\"yellow-warbler\" style=\"height:100%;width:100%;\" />\u003cfigcaption class=\"img-caption\">Yellow-warbler\u003c/figcaption>\u003c/figure>' />\n \u003cCarouselItemDirective template='\u003cfigure class=\"img-container\">\u003cimg src=\"url\" alt=\"bee-eater\" style=\"height:100%;width:100%;\" />\u003cfigcaption class=\"img-caption\">Bee-eater\u003c/figcaption>\u003c/figure>' />\n \u003c/CarouselItemsDirective>\n \u003c/CarouselComponent>\n \u003c/div>\n );\n}\n\nexport default App;\n```\n\n### Custom Intervals Per Item\n\nSet different transition intervals for each item using the `interval` prop (milliseconds):\n\n```tsx\n\u003cCarouselComponent>\n \u003cCarouselItemsDirective>\n \u003cCarouselItemDirective template='\u003ch3>Slide 1 - 3 seconds\u003c/h3>' interval={3000} />\n \u003cCarouselItemDirective template='\u003ch3>Slide 2 - 1 second\u003c/h3>' interval={1000} />\n \u003cCarouselItemDirective template='\u003ch3>Slide 3 - 2 seconds\u003c/h3>' interval={2000} />\n \u003cCarouselItemDirective template='\u003ch3>Slide 4 - 5 seconds\u003c/h3>' interval={5000} />\n \u003cCarouselItemDirective template='\u003ch3>Slide 5 - 6 seconds\u003c/h3>' interval={6000} />\n \u003c/CarouselItemsDirective>\n\u003c/CarouselComponent>\n```\n\n**Note:** Custom intervals only work with CarouselItem binding, not with dataSource binding.\n\n## Data Source Binding\n\nWhen using data source binding, you define a common template applied to all items. This approach is ideal for:\n- Large dynamic datasets\n- Items fetched from APIs\n- Templates based on data properties\n\n### Using itemTemplate\n\n```tsx\nimport { CarouselComponent } from \"@syncfusion/ej2-react-navigations\";\nimport { useMemo } from \"react\";\nimport * as React from \"react\";\n\nconst App = () => {\n const productItems = useMemo(() => [\n { ID: 1, Name: \"Cardinal\", imageName: 'cardinal' },\n { ID: 2, Name: \"Kingfisher\", imageName: 'hunei' },\n { ID: 3, Name: \"Keel-billed-toucan\", imageName: 'costa-rica' },\n { ID: 4, Name: \"Yellow-warbler\", imageName: 'kaohsiung' },\n { ID: 5, Name: \"Bee-eater\", imageName: 'bee-eater' }\n ], []);\n\n const itemTemplate = (props: any): JSX.Element => {\n return (\n \u003cfigure className=\"img-container\">\n \u003cimg \n src={\":url\" + props.imageName + \".png\"} \n alt={props.Name} \n style={{ height: \"100%\", width: \"100%\" }} \n />\n \u003cfigcaption className=\"img-caption\">{props.Name}\u003c/figcaption>\n \u003c/figure>\n );\n }\n\n return (\n \u003cdiv className='control-container'>\n \u003cCarouselComponent dataSource={productItems} itemTemplate={itemTemplate} />\n \u003c/div>\n );\n}\n\nexport default App;\n```\n\n### Fetching Data from API\n\n```tsx\nconst [carouselData, setCarouselData] = React.useState([]);\n\nReact.useEffect(() => {\n fetch('url')\n .then(res => res.json())\n .then(data => setCarouselData(data))\n .catch(err => console.error('Failed to load carousel data:', err));\n}, []);\n\nconst itemTemplate = (props: any): JSX.Element => {\n return \u003cimg src={props.imageUrl} alt={props.title} style={{ width: '100%', height: '100%' }} />;\n}\n\nreturn \u003cCarouselComponent dataSource={carouselData} itemTemplate={itemTemplate} />;\n```\n\n## Selection with Property\n\n### Set Initial Slide with selectedIndex\n\nThe `selectedIndex` property specifies which slide displays when the carousel initializes (0-indexed):\n\n```tsx\n\u003cCarouselComponent selectedIndex={3}>\n \u003cCarouselItemsDirective>\n \u003cCarouselItemDirective template='\u003ch3>Slide 1\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 2\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 3\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 4\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 5\u003c/h3>' />\n \u003c/CarouselItemsDirective>\n\u003c/CarouselComponent>\n```\n\nThis renders with Slide 4 (index 3) displayed initially.\n\n### Update Slide Programmatically\n\nChange the selected slide after initial render using state:\n\n```tsx\nconst [selectedIndex, setSelectedIndex] = React.useState(0);\n\nconst goToSlide = (index: number) => {\n setSelectedIndex(index);\n}\n\nreturn (\n \u003cdiv>\n \u003cCarouselComponent selectedIndex={selectedIndex}>\n {/* items */}\n \u003c/CarouselComponent>\n \u003cbutton onClick={() => goToSlide(2)}>Go to Slide 3\u003c/button>\n \u003c/div>\n);\n```\n\n## Selection with Methods\n\n### Using prev() and next() Methods\n\nAccess the carousel instance via `useRef` to call navigation methods:\n\n```tsx\nimport { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from \"@syncfusion/ej2-react-navigations\";\nimport { ButtonComponent } from \"@syncfusion/ej2-react-buttons\";\nimport { useRef } from \"react\";\nimport * as React from \"react\";\n\nconst App = () => {\n const carouselRef = useRef\u003cCarouselComponent>(null);\n\n const prevBtnClick = (): void => {\n carouselRef.current?.prev();\n }\n\n const nextBtnClick = (): void => {\n carouselRef.current?.next();\n }\n\n return (\n \u003cdiv>\n \u003cdiv>\n \u003cButtonComponent className=\"e-btn\" cssClass=\"e-info\" onClick={prevBtnClick}>Previous\u003c/ButtonComponent>\n \u003cButtonComponent className=\"e-btn\" cssClass=\"e-info\" onClick={nextBtnClick}>Next\u003c/ButtonComponent>\n \u003c/div>\n \u003cdiv className='control-container'>\n \u003cCarouselComponent ref={carouselRef}>\n \u003cCarouselItemsDirective>\n \u003cCarouselItemDirective template='\u003cfigure class=\"img-container\">\u003cimg src=\"url\" alt=\"cardinal\" style=\"height:100%;width:100%;\" />\u003cfigcaption class=\"img-caption\">Cardinal\u003c/figcaption>\u003c/figure>' />\n \u003cCarouselItemDirective template='\u003cfigure class=\"img-container\">\u003cimg src=\"url\" alt=\"kingfisher\" style=\"height:100%;width:100%;\" />\u003cfigcaption class=\"img-caption\">Kingfisher\u003c/figcaption>\u003c/figure>' />\n \u003cCarouselItemDirective template='\u003cfigure class=\"img-container\">\u003cimg src=\"url\" alt=\"keel-billed-toucan\" style=\"height:100%;width:100%;\" />\u003cfigcaption class=\"img-caption\">Keel-billed-toucan\u003c/figcaption>\u003c/figure>' />\n \u003cCarouselItemDirective template='\u003cfigure class=\"img-container\">\u003cimg src=\"url\" alt=\"yellow-warbler\" style=\"height:100%;width:100%;\" />\u003cfigcaption class=\"img-caption\">Yellow-warbler\u003c/figcaption>\u003c/figure>' />\n \u003cCarouselItemDirective template='\u003cfigure class=\"img-container\">\u003cimg src=\"url\" alt=\"bee-eater\" style=\"height:100%;width:100%;\" />\u003cfigcaption class=\"img-caption\">Bee-eater\u003c/figcaption>\u003c/figure>' />\n \u003c/CarouselItemsDirective>\n \u003c/CarouselComponent>\n \u003c/div>\n \u003c/div>\n );\n}\n\nexport default App;\n```\n\n**Methods:**\n- `prev()` - Navigate to previous slide\n- `next()` - Navigate to next slide\n\n## Partial Visible Slides\n\n### Enable Adjacent Slide Previews\n\nShow one complete slide plus partial views of previous and next slides using the `partialVisible` property:\n\n```tsx\n\u003cCarouselComponent partialVisible={true}>\n \u003cCarouselItemsDirective>\n \u003cCarouselItemDirective template='\u003ch3>Slide 1\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 2\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 3\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 4\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 5\u003c/h3>' />\n \u003c/CarouselItemsDirective>\n\u003c/CarouselComponent>\n```\n\n### Partial Visible Without Loop\n\nWhen `loop={false}`, the carousel stops at the last slide without wrapping:\n\n```tsx\n\u003cCarouselComponent partialVisible={true} loop={false}>\n \u003cCarouselItemsDirective>\n \u003cCarouselItemDirective template='\u003ch3>Slide 1\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 2\u003c/h3>' />\n \u003cCarouselItemDirective template='\u003ch3>Slide 3\u003c/h3>' />\n \u003c/CarouselItemsDirective>\n\u003c/CarouselComponent>\n```\n\n**Behavior:**\n- With `loop={true}`: Last slide displays with previous slide as partial\n- With `loop={false}`: Previous slide not shown at initial render\n\n### Customizing Partial Slide Size\n\nSee [styling-and-appearance.md](./styling-and-appearance.md#customizing-partial-slides-size) for CSS customization of partial slide area.\n\n## Edge Cases\n\n**No items defined:**\n- Carousel renders with empty container\n- Navigator and indicator buttons still appear but are non-functional\n\n**Single item:**\n- Carousel displays the single item\n- Navigation buttons and indicators appear but have no effect\n- Loop has no visible impact\n\n**Large datasets:**\n- Consider using dataSource with itemTemplate for 50+ items\n- Avoid rendering 100+ CarouselItemDirective elements in JSX\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":9841,"content_sha256":"21cda3c0ceec46a52e7aec05eaeb6481132102237d7a17a48069f8bcc6f4d03f"},{"filename":"references/styling-and-appearance.md","content":"# Styling and Appearance\n\nCustomize the Carousel component's visual appearance using CSS classes and the Theme Studio. The Carousel uses a predictable CSS class hierarchy for targeted styling.\n\n## Table of Contents\n\n- [CSS Structure in React Carousel](#css-structure-in-react-carousel)\n- [Customizing Indicators](#customizing-indicators)\n - [Spacing Between Indicators](#spacing-between-indicators)\n - [Indicator Size and Shape](#indicator-size-and-shape)\n - [Indicator Position](#indicator-position)\n- [Customizing Navigators](#customizing-navigators)\n - [Navigator Icon Size and Color](#navigator-icon-size-and-color)\n - [Navigator Button Background](#navigator-button-background)\n - [Navigator Position](#navigator-position)\n- [Customizing Partial Slides Size](#customizing-partial-slides-size)\n - [Example: Responsive Partial Slides](#example-responsive-partial-slides)\n- [Carousel Item Styling](#carousel-item-styling)\n - [Style Active Slide](#style-active-slide)\n - [Slide Transitions](#slide-transitions)\n - [Carousel Container Styling](#carousel-container-styling)\n- [Theme Studio Integration](#theme-studio-integration)\n - [Import Custom Theme](#import-custom-theme)\n- [Dark Mode Implementation](#dark-mode-implementation)\n- [Full Customization Example](#full-customization-example)\n- [Best Practices](#best-practices)\n\n## CSS Structure in React Carousel\n\nThe following table lists CSS classes used by the Carousel component:\n\n| CSS Class | Purpose |\n|-----------|---------|\n| `.e-carousel` | Root carousel container |\n| `.e-carousel-item` | Individual carousel slide |\n| `.e-carousel-item.e-active` | Currently active/visible slide |\n| `.e-carousel-indicators` | Indicators container |\n| `.e-carousel-indicators .e-indicator-bars` | Indicator bars wrapper |\n| `.e-carousel-indicators .e-indicator-bars .e-indicator-bar` | Individual indicator bar |\n| `.e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator` | Indicator dot/element |\n| `.e-carousel-navigators` | Navigator buttons container |\n| `.e-carousel-navigators .e-previous` | Previous button wrapper |\n| `.e-carousel-navigators .e-next` | Next button wrapper |\n| `.e-carousel-navigators .e-play-pause` | Play/pause button wrapper |\n| `.e-carousel.e-partial .e-carousel-slide-container` | Partial visible slides container |\n\n## Customizing Indicators\n\n### Spacing Between Indicators\n\nIncrease or decrease space between indicator dots:\n\n```css\n.e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar {\n padding: 8px;\n}\n```\n\nAdjust padding value (in pixels) to control spacing. Default is typically 4-6px.\n\n### Indicator Size and Shape\n\nCustomize individual indicator appearance:\n\n```css\n.e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator {\n width: 20px;\n height: 20px;\n border-radius: 100%;\n background-color: rgba(255, 255, 255, 0.5);\n transition: all 0.3s ease;\n}\n\n.e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator.e-active {\n background-color: white;\n width: 30px;\n border-radius: 10px;\n}\n```\n\n### Indicator Position\n\nBy default, indicators appear at the bottom center. Move them outside the carousel:\n\n```css\n.e-carousel .e-carousel-indicators {\n bottom: auto;\n top: -50px; /* Place above carousel */\n}\n```\n\nOr position at top inside:\n\n```css\n.e-carousel .e-carousel-indicators {\n top: 20px;\n bottom: auto;\n}\n```\n\n## Customizing Navigators\n\n### Navigator Icon Size and Color\n\nChange the previous/next button icon appearance:\n\n```css\n.e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled) .e-btn-icon,\n.e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled) .e-btn-icon\n{\n color: greenyellow;\n font-size: 25px;\n}\n```\n\n### Navigator Button Background\n\nStyle the navigator button backgrounds:\n\n```css\n.e-carousel .e-carousel-navigators .e-previous,\n.e-carousel .e-carousel-navigators .e-next\n{\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: 50%;\n padding: 10px;\n}\n```\n\n### Navigator Position\n\nMove navigators from center to bottom or custom position:\n\n```css\n.e-carousel .e-carousel-navigators {\n top: auto;\n bottom: 20px;\n}\n```\n\nOr position outside the carousel:\n\n```css\n.e-carousel .e-carousel-navigators .e-previous,\n.e-carousel .e-carousel-navigators .e-next\n{\n margin: -60px; /* Pull outside carousel boundary */\n background: black;\n}\n```\n\n## Customizing Partial Slides Size\n\nWhen `partialVisible={true}`, customize the visible area of adjacent slides:\n\n```css\n.e-carousel.e-partial .e-carousel-slide-container {\n padding: 0 150px; /* Show 150px of adjacent slides */\n}\n```\n\nIncrease padding value to show more of partial slides; decrease to show less.\n\n### Example: Responsive Partial Slides\n\n```css\n/* Desktop */\n.e-carousel.e-partial .e-carousel-slide-container {\n padding: 0 150px;\n}\n\n/* Tablet */\n@media (max-width: 768px) {\n .e-carousel.e-partial .e-carousel-slide-container {\n padding: 0 100px;\n }\n}\n\n/* Mobile */\n@media (max-width: 480px) {\n .e-carousel.e-partial .e-carousel-slide-container {\n padding: 0 50px;\n }\n}\n```\n\n## Carousel Item Styling\n\n### Style Active Slide\n\nApply styles only to the currently displayed slide:\n\n```css\n.e-carousel-item.e-active {\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n transform: scale(1.02);\n}\n```\n\n### Slide Transitions\n\nAdd smooth transitions between slides:\n\n```css\n.e-carousel-item {\n transition: all 0.3s ease-in-out;\n}\n```\n\n### Carousel Container Styling\n\nStyle the main carousel container:\n\n```css\n.e-carousel {\n border-radius: 10px;\n overflow: hidden;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n```\n\n## Theme Studio Integration\n\nUse Syncfusion Theme Studio to generate custom themes:\n\n1. Visit [Theme Studio]\n2. Select \"Carousel\" component\n3. Customize colors, spacing, and typography\n4. Export the custom CSS\n5. Import in your application\n\n### Import Custom Theme\n\n```css\n@import \"./custom-carousel-theme.css\";\n```\n\n## Dark Mode Implementation\n\nCreate a dark theme variant:\n\n```css\n/* Light mode (default) */\n.e-carousel {\n background-color: white;\n color: #333;\n}\n\n.e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator {\n background-color: rgba(0, 0, 0, 0.3);\n}\n\n/* Dark mode */\n.dark-theme .e-carousel {\n background-color: #1e1e1e;\n color: #fff;\n}\n\n.dark-theme .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator {\n background-color: rgba(255, 255, 255, 0.3);\n}\n```\n\n## Full Customization Example\n\n```css\n/* Carousel container */\n.e-carousel {\n background-color: #f5f5f5;\n border-radius: 12px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n/* Items */\n.e-carousel-item {\n border-radius: 12px;\n overflow: hidden;\n}\n\n.e-carousel-item.e-active {\n box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);\n}\n\n/* Indicators - fancy design */\n.e-carousel .e-carousel-indicators {\n background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);\n padding-bottom: 15px;\n}\n\n.e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background-color: rgba(255, 255, 255, 0.5);\n margin: 0 6px;\n transition: all 0.3s ease;\n}\n\n.e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator.e-active {\n background-color: white;\n width: 32px;\n border-radius: 6px;\n}\n\n/* Navigators - subtle design */\n.e-carousel .e-carousel-navigators .e-previous,\n.e-carousel .e-carousel-navigators .e-next {\n background-color: rgba(0, 0, 0, 0.4);\n border-radius: 4px;\n transition: background-color 0.3s ease;\n}\n\n.e-carousel .e-carousel-navigators .e-previous:hover,\n.e-carousel .e-carousel-navigators .e-next:hover {\n background-color: rgba(0, 0, 0, 0.6);\n}\n\n.e-carousel .e-carousel-navigators .e-previous .e-btn-icon,\n.e-carousel .e-carousel-navigators .e-next .e-btn-icon {\n color: white;\n font-size: 18px;\n}\n```\n\n## Best Practices\n\n- Use CSS classes for static styles\n- Use Theme Studio for consistent branding\n- Test dark mode with `prefers-color-scheme` media query\n- Ensure sufficient color contrast for accessibility\n- Keep custom CSS organized and maintainable\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":8194,"content_sha256":"9a31c495e3bb9104f9eab93ee96d9d2f7754d837a16473598e310391a3b61002"}],"content_json":{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"Implementing the Syncfusion React Carousel Component","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Table of Contents","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Overview","type":"text","marks":[{"type":"link","attrs":{"href":"#component-overview","title":null}}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Getting Started","type":"text","marks":[{"type":"link","attrs":{"href":"#getting-started","title":null}}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Populating Items and Selection","type":"text","marks":[{"type":"link","attrs":{"href":"#populating-items-and-selection","title":null}}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Navigation and Indicators","type":"text","marks":[{"type":"link","attrs":{"href":"#navigation-and-indicators","title":null}}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Animations and Transitions","type":"text","marks":[{"type":"link","attrs":{"href":"#animations-and-transitions","title":null}}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"API Properties","type":"text","marks":[{"type":"link","attrs":{"href":"#api-properties","title":null}}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"API Methods","type":"text","marks":[{"type":"link","attrs":{"href":"#api-methods","title":null}}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"API Events","type":"text","marks":[{"type":"link","attrs":{"href":"#api-events","title":null}}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Styling and Appearance","type":"text","marks":[{"type":"link","attrs":{"href":"#styling-and-appearance","title":null}}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Accessibility","type":"text","marks":[{"type":"link","attrs":{"href":"#accessibility","title":null}}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Image Optimization","type":"text","marks":[{"type":"link","attrs":{"href":"#image-optimization","title":null}}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Common Patterns","type":"text","marks":[{"type":"link","attrs":{"href":"#common-patterns","title":null}}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Use Cases","type":"text","marks":[{"type":"link","attrs":{"href":"#use-cases","title":null}}]}]}]}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"When to Use This Skill","type":"text"}]},{"type":"paragraph","content":[{"text":"Implement the Carousel component when you need to:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Create rotating image galleries with smooth transitions","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Build slideshow presentations with navigation controls","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Display product carousels for e-commerce sites","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Implement testimonial sliders with indicators","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Build content carousels with auto-play functionality","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Support touch/swipe navigation on mobile devices","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Display items with accessibility compliance (WCAG 2.2, Section 508)","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Component Overview","type":"text"}]},{"type":"paragraph","content":[{"text":"The Carousel component manages:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Visual Display:","type":"text","marks":[{"type":"strong"}]},{"text":" Renders one active slide with customizable templates","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Navigation:","type":"text","marks":[{"type":"strong"}]},{"text":" Previous/next buttons with multiple visibility modes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Indicators:","type":"text","marks":[{"type":"strong"}]},{"text":" Show current position with multiple indicator types (dots, fractions, progress bars)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Animations:","type":"text","marks":[{"type":"strong"}]},{"text":" Smooth slide transitions with fade, slide, or custom effects","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Interaction:","type":"text","marks":[{"type":"strong"}]},{"text":" Auto-play, manual swipe, keyboard navigation","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Accessibility:","type":"text","marks":[{"type":"strong"}]},{"text":" Full ARIA support, keyboard shortcuts, screen reader compatibility","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Core imports:","type":"text","marks":[{"type":"strong"}]}]},{"type":"code_block","attrs":{"wrap":false,"language":"ts"},"content":[{"text":"import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from \"@syncfusion/ej2-react-navigations\";","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Documentation and Navigation Guide","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Getting Started","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/getting-started.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/getting-started.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Installation and package dependencies","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Development environment setup with Vite or Create React App","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"CSS imports and theme configuration (Tailwind, Bootstrap, Fluent, Material)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Basic carousel component setup","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"First working example with items","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Common setup issues and solutions","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"When to read:","type":"text","marks":[{"type":"strong"}]},{"text":" First time setting up Carousel or troubleshooting initial setup problems.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Populating Items and Selection","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/populating-items.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/populating-items.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Populating slides using CarouselItem directives","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Data source binding with itemTemplate","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Setting initial slide with selectedIndex","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Navigation with prev() and next() methods","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Partial visible slides (showing adjacent slides)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Programmatic vs. declarative slide rendering","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"When to read:","type":"text","marks":[{"type":"strong"}]},{"text":" Building slide content, handling dynamic data, or implementing navigation controls.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Navigators and Indicators","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/navigators-and-indicators.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/navigators-and-indicators.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Previous/next navigator button visibility modes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Custom navigator button templates","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Showing/hiding indicators (progress dots)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Four indicator types: Default, Dynamic, Fraction, Progress","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Indicator templates with preview images","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Play/pause button control and templates","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"When to read:","type":"text","marks":[{"type":"strong"}]},{"text":" Customizing navigation UI, changing indicator style, or implementing play controls.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Animations and Transitions","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/animations-and-transitions.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/animations-and-transitions.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Animation effects (Fade, Slide, Custom CSS)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Setting slide transition intervals per item","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Auto-play configuration and timing","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Pause on hover behavior","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Looping and non-looping behavior","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Touch swipe modes and disabled interactions","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Slide changing events (slideChanging, slideChanged)","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"When to read:","type":"text","marks":[{"type":"strong"}]},{"text":" Implementing smooth transitions, configuring auto-play, or adding custom animations.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Styling and Appearance","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/styling-and-appearance.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/styling-and-appearance.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"CSS class structure for customization","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Customizing indicator appearance and spacing","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Navigator button positioning and styling","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Partial slide area customization","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Theme Studio integration for visual theming","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Dark mode and custom color schemes","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"When to read:","type":"text","marks":[{"type":"strong"}]},{"text":" Styling indicators/navigators, positioning elements, or creating custom themes.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Accessibility","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/accessibility.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/accessibility.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"WCAG 2.2 and Section 508 compliance","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"ARIA attributes and roles","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Keyboard interaction shortcuts (arrows, Home, End, Space, Enter)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Screen reader support","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Focus management and mobile accessibility","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"When to read:","type":"text","marks":[{"type":"strong"}]},{"text":" Building accessible carousels or implementing keyboard navigation.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Image Optimization","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/image-optimization.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/image-optimization.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Loading carousel images in WebP format","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Performance benefits and file size reduction","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Image format conversion techniques","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Implementation with carousel items","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"When to read:","type":"text","marks":[{"type":"strong"}]},{"text":" Optimizing carousel performance or implementing modern image formats.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Quick Start Example","type":"text"}]},{"type":"paragraph","content":[{"text":"Minimal working carousel with 5 images:","type":"text","marks":[{"type":"strong"}]}]},{"type":"code_block","attrs":{"wrap":false,"language":"tsx"},"content":[{"text":"import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from \"@syncfusion/ej2-react-navigations\";\nimport * as React from \"react\";\n\nconst App = () => {\n return (\n \u003cdiv className='control-container'>\n \u003cCarouselComponent>\n \u003cCarouselItemsDirective>\n \u003cCarouselItemDirective template='\u003cfigure class=\"img-container\">\u003cimg src=\"url\" alt=\"cardinal\" style=\"height:100%;width:100%;\" />\u003cfigcaption class=\"img-caption\">Cardinal\u003c/figcaption>\u003c/figure>' />\n \u003cCarouselItemDirective template='\u003cfigure class=\"img-container\">\u003cimg src=\"url\" alt=\"kingfisher\" style=\"height:100%;width:100%;\" />\u003cfigcaption class=\"img-caption\">Kingfisher\u003c/figcaption>\u003c/figure>' />\n \u003cCarouselItemDirective template='\u003cfigure class=\"img-container\">\u003cimg src=\"url\" alt=\"toucan\" style=\"height:100%;width:100%;\" />\u003cfigcaption class=\"img-caption\">Toucan\u003c/figcaption>\u003c/figure>' />\n \u003cCarouselItemDirective template='\u003cfigure class=\"img-container\">\u003cimg src=\"url\" alt=\"warbler\" style=\"height:100%;width:100%;\" />\u003cfigcaption class=\"img-caption\">Warbler\u003c/figcaption>\u003c/figure>' />\n \u003cCarouselItemDirective template='\u003cfigure class=\"img-container\">\u003cimg src=\"url\" alt=\"bee-eater\" style=\"height:100%;width:100%;\" />\u003cfigcaption class=\"img-caption\">Bee-eater\u003c/figcaption>\u003c/figure>' />\n \u003c/CarouselItemsDirective>\n \u003c/CarouselComponent>\n \u003c/div>\n );\n}\n\nexport default App;","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Common Patterns","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Pattern 1: Auto-Play Gallery with Indicators and Navigators","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"tsx"},"content":[{"text":"\u003cCarouselComponent autoPlay={true} showIndicators={true} buttonsVisibility=\"Visible\">\n \u003cCarouselItemsDirective>\n {/* items */}\n \u003c/CarouselItemsDirective>\n\u003c/CarouselComponent>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Pattern 2: Data-Driven Carousel with Dynamic Content","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"tsx"},"content":[{"text":"const itemTemplate = (props: any): JSX.Element => {\n return \u003cimg src={props.imageUrl} alt={props.title} />;\n}\n\n\u003cCarouselComponent dataSource={carouselData} itemTemplate={itemTemplate} />","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Pattern 3: Carousel with Custom Navigation Buttons","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"tsx"},"content":[{"text":"const nextButtonTemplate = (props: any): JSX.Element => {\n return \u003cButtonComponent iconCss=\"e-icons e-chevron-right\" />;\n}\n\n\u003cCarouselComponent nextButtonTemplate={nextButtonTemplate} />","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Pattern 4: Touch-Enabled Mobile Carousel","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"tsx"},"content":[{"text":"\u003cCarouselComponent \n enableTouchSwipe={true} \n swipeMode={CarouselSwipeMode.Touch & CarouselSwipeMode.Mouse}\n pauseOnHover={true}\n>\n {/* items */}\n\u003c/CarouselComponent>","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"API Properties Overview","type":"text"}]},{"type":"paragraph","content":[{"text":"Core Display Properties:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"dataSource","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Bind carousel to external data","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"itemTemplate","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Template for data-bound items","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"items","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Collection of CarouselItemModel","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"selectedIndex","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Current slide index","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Animation & Behavior:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"animationEffect","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Animation type (None, Slide, Fade, Custom)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"interval","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Transition delay in milliseconds (default: 5000)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"autoPlay","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Enable auto-play (default: false)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"loop","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Loop slides infinitely (default: true)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"pauseOnHover","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Pause on hover (default: true)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"enableTouchSwipe","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Enable touch swiping (default: true)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"swipeMode","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Touch/mouse swipe modes (Touch, Mouse)","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"UI Controls:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"buttonsVisibility","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Navigator buttons (Hidden, Visible, VisibleOnHover)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"showIndicators","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Show indicators (default: true)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"showPlayButton","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Show play/pause button (default: false)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"indicatorsType","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Indicator style (Default, Dynamic, Fraction, Progress)","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Customization:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"previousButtonTemplate","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Previous button UI","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"nextButtonTemplate","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Next button UI","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"playButtonTemplate","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Play/pause button UI","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"indicatorsTemplate","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Indicators UI","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"cssClass","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Custom CSS classes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"partialVisible","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Show adjacent slides (default: false)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"allowKeyboardInteraction","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Keyboard navigation (default: true)","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Layout & Localization:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"height","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Component height (pixels/percentage)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"width","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Component width (pixels/percentage)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"enableRtl","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Right-to-left support","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"enablePersistence","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Persist state between reloads","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"locale","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Culture/localization setting","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"htmlAttributes","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Custom HTML attributes","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Common Use Cases","type":"text"}]},{"type":"paragraph","content":[{"text":"1. Product Gallery (E-Commerce)","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Display product images with fade animation","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Show indicators to indicate available images","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Enable swipe for mobile users","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"See: ","type":"text"},{"text":"populating-items.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/populating-items.md","title":null}}]},{"text":" + ","type":"text"},{"text":"animations-and-transitions.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/animations-and-transitions.md","title":null}}]}]}]}]},{"type":"paragraph","content":[{"text":"2. Testimonial/Review Carousel","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Auto-play testimonials with 10-second intervals","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Custom testimonial template","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Pause on hover to allow reading","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"See: ","type":"text"},{"text":"populating-items.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/populating-items.md","title":null}}]},{"text":" + ","type":"text"},{"text":"animations-and-transitions.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/animations-and-transitions.md","title":null}}]}]}]}]},{"type":"paragraph","content":[{"text":"3. Accessible Banner Carousel","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Keyboard navigation with Home/End/Arrow keys","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"WCAG 2.2 compliant structure","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Screen reader friendly labels","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"See: ","type":"text"},{"text":"accessibility.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/accessibility.md","title":null}}]}]}]}]},{"type":"paragraph","content":[{"text":"4. Styled Hero Carousel","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Custom navigator and indicator styling","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Partial visible slides for context","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Theme Studio customization","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"See: ","type":"text"},{"text":"styling-and-appearance.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/styling-and-appearance.md","title":null}}]},{"text":" + ","type":"text"},{"text":"navigators-and-indicators.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/navigators-and-indicators.md","title":null}}]}]}]}]},{"type":"paragraph","content":[{"text":"5. Data-Bound Carousel","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Bind carousel to REST API data","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Dynamic templates based on item properties","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Real-time updates","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"See: ","type":"text"},{"text":"populating-items.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/populating-items.md","title":null}}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Complete API Reference","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"API Properties Reference","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/api-properties.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/api-properties.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"Comprehensive documentation for all 28+ carousel properties organized by functionality:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Core Data & Selection:","type":"text","marks":[{"type":"strong"}]},{"text":" dataSource, itemTemplate, items, selectedIndex","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Animation & Timing:","type":"text","marks":[{"type":"strong"}]},{"text":" animationEffect, interval, autoPlay, loop, pauseOnHover","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Navigation & Indicators:","type":"text","marks":[{"type":"strong"}]},{"text":" buttonsVisibility, showIndicators, indicatorsType, showPlayButton","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Template & Customization:","type":"text","marks":[{"type":"strong"}]},{"text":" Button/indicator templates, cssClass, partialVisible","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Interaction & Accessibility:","type":"text","marks":[{"type":"strong"}]},{"text":" enableTouchSwipe, swipeMode, allowKeyboardInteraction","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Layout & Localization:","type":"text","marks":[{"type":"strong"}]},{"text":" height, width, enableRtl, enablePersistence, locale, htmlAttributes","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Each property includes type information, default values, and practical code examples.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"API Methods Reference","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/api-methods.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/api-methods.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"Complete documentation for all carousel control methods:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"next()","type":"text","marks":[{"type":"code_inline"},{"type":"strong"}]},{"text":" - Navigate to next slide with loop support","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"prev()","type":"text","marks":[{"type":"code_inline"},{"type":"strong"}]},{"text":" - Navigate to previous slide with loop support","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"getHostElement()","type":"text","marks":[{"type":"code_inline"},{"type":"strong"}]},{"text":" - Access underlying carousel DOM element","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Includes method signatures, use cases, practical examples, and advanced patterns like skip multiple slides, go to specific slide, and scroll-to-carousel functionality.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"API Events Reference","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/api-events.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/api-events.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"Comprehensive event documentation with complete event arguments:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"slideChanging","type":"text","marks":[{"type":"code_inline"},{"type":"strong"}]},{"text":" - Fires BEFORE transition (cancelable)","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Arguments: cancel, currentIndex, currentSlide, nextIndex, nextSlide, isSwiped, name, slideDirection","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Use cases: Validation, confirmation dialogs, preventing access to specific slides","type":"text"}]}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"slideChanged","type":"text","marks":[{"type":"code_inline"},{"type":"strong"}]},{"text":" - Fires AFTER transition (not cancelable)","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Arguments: currentIndex, currentSlide, previousIndex, previousSlide, isSwiped, name, slideDirection","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Use cases: Analytics tracking, updating UI counters, loading content, triggering animations","type":"text"}]}]}]}]}]},{"type":"paragraph","content":[{"text":"Includes practical examples for rate limiting, history tracking, analytics integration, and event pattern library.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Next Steps","type":"text"}]},{"type":"ordered_list","attrs":{"order":1,"listStyle":"number"},"content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Start here:","type":"text","marks":[{"type":"strong"}]},{"text":" Read ","type":"text"},{"text":"getting-started.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/getting-started.md","title":null}}]},{"text":" to install and configure","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Add content:","type":"text","marks":[{"type":"strong"}]},{"text":" Follow ","type":"text"},{"text":"populating-items.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/populating-items.md","title":null}}]},{"text":" for your data","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Customize UI:","type":"text","marks":[{"type":"strong"}]},{"text":" Use ","type":"text"},{"text":"navigators-and-indicators.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/navigators-and-indicators.md","title":null}}]},{"text":" for controls","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Enhance behavior:","type":"text","marks":[{"type":"strong"}]},{"text":" Reference ","type":"text"},{"text":"animations-and-transitions.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/animations-and-transitions.md","title":null}}]},{"text":" for effects","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Polish design:","type":"text","marks":[{"type":"strong"}]},{"text":" Apply ","type":"text"},{"text":"styling-and-appearance.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/styling-and-appearance.md","title":null}}]},{"text":" for styling","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Ensure access:","type":"text","marks":[{"type":"strong"}]},{"text":" Implement ","type":"text"},{"text":"accessibility.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/accessibility.md","title":null}}]},{"text":" for compliance","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Optimize images:","type":"text","marks":[{"type":"strong"}]},{"text":" Use ","type":"text"},{"text":"image-optimization.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/image-optimization.md","title":null}}]},{"text":" for performance","type":"text"}]}]}]}]},"metadata":{"date":"2026-11-02","name":"syncfusion-react-carousel","author":"@skillopedia","source":{"stars":3,"repo_name":"react-ui-components-skills","origin_url":"https://github.com/syncfusion/react-ui-components-skills/blob/HEAD/skills/syncfusion-react-carousel/SKILL.md","repo_owner":"syncfusion","body_sha256":"d72602dd0f1b5cd8dbb549620a62225bf64994f0474e47bb30426311e12b2ceb","cluster_key":"a2e0086c6ef473722bb106b432ab1f2d711170d8092c9e67d6122e6630cfbbd6","clean_bundle":{"format":"clean-skill-bundle-v1","source":"syncfusion/react-ui-components-skills/skills/syncfusion-react-carousel/SKILL.md","text_bytes":117676,"source_commit":"4baa652dcd2a01ebb3cf9ca66051cc18ffa40f81","skills_sh_rank":16531,"attachment_count":10,"text_attachments":10,"attachment_storage":"skill_attachments","binary_attachments":0},"cluster_size":1,"skill_md_path":"skills/syncfusion-react-carousel/SKILL.md","import_metadata":{"date":"2026-11-02","author":"@skillopedia","version":"v1","category":"web-development","category_label":"Web"},"exact_dupes_collapsed_into_this":0},"version":"v1","category":"web-development","metadata":{"author":"Syncfusion Inc","version":"34.1.29","category":"Navigation Components"},"import_tag":"skills-sh-top20k-2026-11","description":"Complete guide to implementing the Syncfusion React Carousel component for rotating image galleries, product carousels, slideshow presentations, testimonials, and sequential content display. Use this skill when working with slide transitions, navigation controls, animations, styling, and accessibility features. Covers installation, item population, and all API properties, methods, and events."}},"renderedAt":1793665939901}

Implementing the Syncfusion React Carousel Component Table of Contents - 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,…