# Syncfusion Angular Carousel
> Learn how to implement the Syncfusion Angular Carousel component for displaying slides with images and content. This comprehensive skill includes complete API documentation with all 30 properties, 5 methods, 2 events, and working code examples. Use when creating image galleries, product showcases, featured content sliders, news rotators, or implementing carousel navigation with animations.
- Skill: `syncfusion/syncfusion-angular-carousel` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add syncfusion/syncfusion-angular-carousel`
- Raw SKILL.md: https://api.skillmd.com/api/skills/syncfusion/syncfusion-angular-carousel/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: syncfusion (https://skillmd.com/u/syncfusion)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/syncfusion/syncfusion-angular-carousel
---
# Implementing Syncfusion Angular Carousel Component
## When to Use This Skill
Use the Syncfusion Angular Carousel component when you need to:
- **Display multiple items sequentially** – Show images, products, or content in slide show format
- **Create image galleries** – Build responsive photo galleries with automatic or manual navigation
- **Feature rotating content** – Display featured articles, product highlights, or promotional banners
- **Implement scroll-like navigation** – Provide next/previous controls for content browsing
- **Add animations and transitions** – Create visually appealing slide effects with fade or slide animations
- **Support touch interactions** – Enable swipe gestures for mobile and touch devices
- **Display progress indicators** – Show users their position within carousel (dots, fractions, progress bars)
- **Handle slide change events** – Execute custom logic when slides transition
## Component Overview
The Syncfusion Angular Carousel component allows users to display images with content, links, and other media in a slide show format. It provides:
- **Multiple indicator types** – Default dots, dynamic markers, fractions, progress bars
- **Built-in animations** – None, Slide, Fade, and custom animation support
- **Navigation controls** – Previous/next buttons with visibility options (Visible, Hidden, VisibleOnHover)
- **Touch support** – Swipe gestures for mobile and desktop navigation
- **Auto-play functionality** – Automatic slide transitions with configurable intervals
- **Keyboard accessibility** – Arrow key navigation and WAI-ARIA compliance
- **Template support** – Custom item rendering, button templates, indicator customization
- **Event handling** – Pre/post slide transition events (slideChanging, slideChanged) for custom logic
- **Persistence** – Save/restore carousel state across page reloads
- **RTL support** – Right-to-left layout for Arabic, Hebrew, and other RTL languages
---
## Quick Start Example
Basic carousel with automatic slide transitions:
```typescript
import { Component } from "@angular/core";
import { CarouselModule } from "@syncfusion/ej2-angular-navigations";
@Component({
selector: "app-carousel",
standalone: true,
imports: [CarouselModule],
template: `
CardinalKingfisherKeel-billed Toucan
`,
styles: [`
.carousel-container {
height: 400px;
margin: 20px 0;
}
`]
})
export class CarouselComponent {}
```
**Key result:** Carousel automatically transitions between slides every 5000ms with slide animation.
---
## Component Properties
### 30 Total Properties Organized by Category
#### 1. Core Animation Properties
**animationEffect**
- **Type:** `'None' | 'Slide' | 'Fade' | 'Custom'`
- **Default:** `'Slide'`
- **Description:** Specifies animation effect when transitioning between slides.
```typescript
// Fade animation
// No animation
// Custom CSS animation
```
#### 2. Auto-Play Properties
**autoPlay**
- **Type:** `boolean`
- **Default:** `true`
- **Description:** Enables automatic sliding through carousel items at intervals.
```typescript
```
**interval**
- **Type:** `number`
- **Default:** `5000` (milliseconds)
- **Description:** Time between automatic slide transitions (milliseconds). Only applies when autoPlay is true.
```typescript
```
**pauseOnHover**
- **Type:** `boolean`
- **Default:** `true`
- **Description:** Pauses auto-play when mouse hovers over carousel.
```typescript
```
#### 3. Navigation Properties
**buttonsVisibility**
- **Type:** `'Visible' | 'Hidden' | 'VisibleOnHover'`
- **Default:** `'Visible'`
- **Description:** Controls visibility of previous/next navigation buttons.
```typescript
// Always visible
// Only on hover
// Never visible
```
**previousButtonTemplate**
- **Type:** `string | object`
- **Default:** `null`
- **Description:** Custom template for previous navigation button.
```typescript
```
**nextButtonTemplate**
- **Type:** `string | object`
- **Default:** `null`
- **Description:** Custom template for next navigation button.
```typescript
```
**loop**
- **Type:** `boolean`
- **Default:** `true`
- **Description:** Enables infinite looping - cycles back to first slide after last.
```typescript
```
**selectedIndex**
- **Type:** `number`
- **Default:** `0`
- **Description:** Initial slide index to display (0-based).
```typescript
```
#### 4. Indicator Properties
**showIndicators**
- **Type:** `boolean`
- **Default:** `true`
- **Description:** Shows or hides position indicators.
```typescript
```
**indicatorsType**
- **Type:** `'Default' | 'Dynamic' | 'Fraction' | 'Progress'`
- **Default:** `'Default'`
- **Description:** Style of indicators displayed.
```typescript
// Dot indicators
// Numeric format
// Progress bar
// Animated
```
**indicatorsTemplate**
- **Type:** `string | object`
- **Default:** `null`
- **Description:** Custom template for indicators (e.g., thumbnail previews).
```typescript
```
**showPlayButton**
- **Type:** `boolean`
- **Default:** `true`
- **Description:** Shows or hides play button to resume auto-play.
```typescript
```
**playButtonTemplate**
- **Type:** `string | object`
- **Default:** `null`
- **Description:** Custom template for play button.
```typescript
```
#### 5. Data and Item Properties
**dataSource**
- **Type:** `any[]`
- **Default:** `null`
- **Description:** Array of data for dynamic carousel items (use with itemTemplate).
```typescript
// Component
export class CarouselComponent {
public slides = [
{ id: 1, image: 'img1.jpg', title: 'Slide 1' },
{ id: 2, image: 'img2.jpg', title: 'Slide 2' },
{ id: 3, image: 'img3.jpg', title: 'Slide 3' }
];
}
// Template
{{item.title}}
```
**itemTemplate**
- **Type:** `string | object`
- **Default:** `null`
- **Description:** Template for rendering each carousel item from dataSource.
```typescript
{{product.name}}
${{product.price}}
```
**items**
- **Type:** `CarouselItem[]`
- **Default:** `[]`
- **Description:** Array of carousel items (use with e-carousel-item directive for static content).
```typescript
```
**cssClass**
- **Type:** `string`
- **Default:** `''`
- **Description:** CSS class(es) for carousel container styling.
```typescript
```
#### 6. Interaction Properties
**enableTouchSwipe**
- **Type:** `boolean`
- **Default:** `true`
- **Description:** Enables swiping on touch devices to navigate slides.
```typescript
```
**swipeMode**
- **Type:** `'Touch' | 'Mouse' | 'Touch|Mouse'`
- **Default:** `'Touch|Mouse'`
- **Description:** Which interaction types enable swiping.
```typescript
// Both touch and mouse
// Touch only
// Mouse only
```
**allowKeyboardInteraction**
- **Type:** `boolean`
- **Default:** `true`
- **Description:** Allows arrow keys to navigate carousel.
```typescript
```
#### 7. Dimension Properties
**height**
- **Type:** `string | number`
- **Default:** `'100%'`
- **Description:** Carousel container height (px, %, em, etc.).
```typescript
// Fixed height
// Percentage
```
**width**
- **Type:** `string | number`
- **Default:** `'100%'`
- **Description:** Carousel container width (px, %, em, etc.).
```typescript
// Fixed width
// Full width
```
**partialVisible**
- **Type:** `boolean`
- **Default:** `false`
- **Description:** Shows partial slides on sides for context.
```typescript
```
#### 8. Localization and Persistence
**locale**
- **Type:** `string`
- **Default:** `''` (uses browser locale)
- **Description:** Locale/language for carousel (affects aria-labels, accessibility text).
```typescript
```
**enablePersistence**
- **Type:** `boolean`
- **Default:** `false`
- **Description:** Saves carousel state to localStorage (restores on page reload).
```typescript
```
#### 9. Accessibility Properties
**enableRtl**
- **Type:** `boolean`
- **Default:** `false`
- **Description:** Enables right-to-left layout for RTL languages.
```typescript
```
**htmlAttributes**
- **Type:** `Record`
- **Default:** `null`
- **Description:** Additional HTML attributes for carousel root element.
```typescript
```
---
## Component Methods
### 5 Total Methods
#### 1. next()
- **Signature:** `next(): void`
- **Description:** Navigate to next slide programmatically.
```typescript
import { Component, ViewChild } from "@angular/core";
import { CarouselComponent } from "@syncfusion/ej2-angular-navigations";
@Component({
selector: "app-carousel-nav",
template: `
`
})
export class CarouselNavComponent {
@ViewChild("carousel") carousel!: CarouselComponent;
goNext() {
this.carousel.next();
}
}
```
#### 2. prev()
- **Signature:** `prev(): void`
- **Description:** Navigate to previous slide programmatically.
```typescript
export class CarouselNavComponent {
@ViewChild("carousel") carousel!: CarouselComponent;
goPrev() {
this.carousel.prev();
}
}
```
#### 3. play()
- **Signature:** `play(): void`
- **Description:** Resume automatic slide transitions.
```typescript
import { Component, ViewChild } from "@angular/core";
import { CarouselComponent } from "@syncfusion/ej2-angular-navigations";
@Component({
selector: "app-carousel-controls",
template: `
`
})
export class CarouselControlsComponent {
@ViewChild("carousel") carousel!: CarouselComponent;
playSlides() {
this.carousel.play();
}
pauseSlides() {
this.carousel.pause();
}
}
```
#### 4. pause()
- **Signature:** `pause(): void`
- **Description:** Pause automatic slide transitions.
```typescript
export class CarouselControlsComponent {
@ViewChild("carousel") carousel!: CarouselComponent;
pauseSlides() {
this.carousel.pause();
}
}
```
#### 5. destroy()
- **Signature:** `destroy(): void`
- **Description:** Destroy carousel component and release resources. Call before component removal.
```typescript
import { Component, ViewChild, OnDestroy } from "@angular/core";
import { CarouselComponent } from "@syncfusion/ej2-angular-navigations";
@Component({
selector: "app-carousel-cleanup",
template: `
`
})
export class CarouselCleanupComponent implements OnDestroy {
@ViewChild("carousel") carousel!: CarouselComponent;
ngOnDestroy() {
// Cleanup when component destroyed
this.carousel.destroy();
}
}
```
---
## Component Events
### 2 Total Events
#### 1. slideChanging
- **Event Args:** `SlideChangingEventArgs`
- **Description:** Triggered before slide transition (can be prevented).
- **Key Use:** Validate or cancel slide changes
**Event Arguments:**
- `cancel: boolean` – Set true to prevent transition
- `currentIndex: number` – Current slide index
- `currentSlide: HTMLElement` – Current slide DOM element
- `nextIndex: number` – Next slide index to display
- `nextSlide: HTMLElement` – Next slide DOM element
- `isSwiped: boolean` – Whether triggered by swipe
- `slideDirection: 'Next' | 'Previous'` – Direction of change
- `name: string` – Event name ('slideChanging')
```typescript
import { Component, ViewChild } from "@angular/core";
import { CarouselComponent, SlideChangingEventArgs } from "@syncfusion/ej2-angular-navigations";
@Component({
selector: "app-carousel-event",
template: `
Cannot navigate to slide 2
Slide 1
Slide 2 - BLOCKED
Slide 3
`
})
export class CarouselEventComponent {
onSlideChanging(args: SlideChangingEventArgs) {
console.log(`Transitioning from ${args.currentIndex} to ${args.nextIndex}`);
// Prevent navigating to slide 2
if (args.nextIndex === 1) {
args.cancel = true;
alert("Slide 2 is blocked");
}
}
}
```
#### 2. slideChanged
- **Event Args:** `SlideChangedEventArgs`
- **Description:** Triggered after slide transition completes.
- **Key Use:** Track slide changes, update UI, log analytics
**Event Arguments:**
- `currentIndex: number` – Current slide index
- `currentSlide: HTMLElement` – Current slide DOM element
- `previousIndex: number` – Previous slide index
- `previousSlide: HTMLElement` – Previous slide DOM element
- `isSwiped: boolean` – Whether triggered by swipe
- `slideDirection: 'Next' | 'Previous'` – Direction of change
- `name: string` – Event name ('slideChanged')
```typescript
import { Component, ViewChild } from "@angular/core";
import { CarouselComponent, SlideChangedEventArgs } from "@syncfusion/ej2-angular-navigations";
@Component({
selector: "app-carousel-tracking",
template: `
