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: ` <div class="carousel-container"> <ejs-carousel [autoPlay]="true" [animationEffect]="'Slide'"> <e-carousel-items> <e-carousel-item> <ng-template #template> <figure class="img-container"> <img src="https://ej2.syncfusion.com/products/images/carousel/cardinal.png" alt="Slide 1" /> <figcaption>Cardinal</figcaption> </figure> </ng-template> </e-carousel-item> <e-carousel-item> <ng-template #template> <figure class="img-container"> <img src="https://ej2.syncfusion.com/products/images/carousel/hunei.png" alt="Slide 2" /> <figcaption>Kingfisher</figcaption> </figure> </ng-template> </e-carousel-item> <e-carousel-item> <ng-template #template> <figure class="img-container"> <img src="https://ej2.syncfusion.com/products/images/carousel/costa-rica.png" alt="Slide 3" /> <figcaption>Keel-billed Toucan</figcaption> </figure> </ng-template> </e-carousel-item> </e-carousel-items> </ejs-carousel> </div> `, 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 <ejs-carousel [animationEffect]="'Fade'"> <!-- Smooth fade in/out between slides --> </ejs-carousel> // No animation <ejs-carousel [animationEffect]="'None'"> <!-- Instant slide transition --> </ejs-carousel> // Custom CSS animation <ejs-carousel [animationEffect]="'Custom'" [cssClass]="'custom-animation'"> <!-- Define custom animation in CSS --> </ejs-carousel> ``` #### 2. Auto-Play Properties **autoPlay** - **Type:** `boolean` - **Default:** `true` - **Description:** Enables automatic sliding through carousel items at intervals. ```typescript <ejs-carousel [autoPlay]="true" [interval]="3000"> <!-- Auto transitions every 3 seconds --> </ejs-carousel> ``` **interval** - **Type:** `number` - **Default:** `5000` (milliseconds) - **Description:** Time between automatic slide transitions (milliseconds). Only applies when autoPlay is true. ```typescript <ejs-carousel [autoPlay]="true" [interval]="2000"> <!-- 2 second interval between slides --> </ejs-carousel> ``` **pauseOnHover** - **Type:** `boolean` - **Default:** `true` - **Description:** Pauses auto-play when mouse hovers over carousel. ```typescript <ejs-carousel [autoPlay]="true" [pauseOnHover]="false"> <!-- Continue auto-play even on hover --> </ejs-carousel> ``` #### 3. Navigation Properties **buttonsVisibility** - **Type:** `'Visible' | 'Hidden' | 'VisibleOnHover'` - **Default:** `'Visible'` - **Description:** Controls visibility of previous/next navigation buttons. ```typescript // Always visible <ejs-carousel [buttonsVisibility]="'Visible'"> <!-- Buttons always shown --> </ejs-carousel> // Only on hover <ejs-carousel [buttonsVisibility]="'VisibleOnHover'"> <!-- Buttons appear on mouse hover --> </ejs-carousel> // Never visible <ejs-carousel [buttonsVisibility]="'Hidden'"> <!-- Use indicators or swipe instead --> </ejs-carousel> ``` **previousButtonTemplate** - **Type:** `string | object` - **Default:** `null` - **Description:** Custom template for previous navigation button. ```typescript <ejs-carousel [previousButtonTemplate]="'#prevBtnTemplate'"> <ng-template #prevBtnTemplate> <button class="custom-prev"><i class="icon-left"></i> Back</button> </ng-template> <e-carousel-items><!-- Items --></e-carousel-items> </ejs-carousel> ``` **nextButtonTemplate** - **Type:** `string | object` - **Default:** `null` - **Description:** Custom template for next navigation button. ```typescript <ejs-carousel [nextButtonTemplate]="'#nextBtnTemplate'"> <ng-template #nextBtnTemplate> <button class="custom-next">Next <i class="icon-right"></i></button> </ng-template> <e-carousel-items><!-- Items --></e-carousel-items> </ejs-carousel> ``` **loop** - **Type:** `boolean` - **Default:** `true` - **Description:** Enables infinite looping - cycles back to first slide after last. ```typescript <ejs-carousel [loop]="true"> <!-- Last slide -> First slide --> </ejs-carousel> <ejs-carousel [loop]="false"> <!-- Last slide -> Navigation stops --> </ejs-carousel> ``` **selectedIndex** - **Type:** `number` - **Default:** `0` - **Description:** Initial slide index to display (0-based). ```typescript <ejs-carousel [selectedIndex]="2"> <!-- Start on third slide (index 2) --> </ejs-carousel> ``` #### 4. Indicator Properties **showIndicators** - **Type:** `boolean` - **Default:** `true` - **Description:** Shows or hides position indicators. ```typescript <ejs-carousel [showIndicators]="true"> <!-- Indicators visible --> </ejs-carousel> <ejs-carousel [showIndicators]="false"> <!-- No indicators shown --> </ejs-carousel> ``` **indicatorsType** - **Type:** `'Default' | 'Dynamic' | 'Fraction' | 'Progress'` - **Default:** `'Default'` - **Description:** Style of indicators displayed. ```typescript // Dot indicators <ejs-carousel [indicatorsType]="'Default'"> <!-- Shows: ● ● ● ● ● --> </ejs-carousel> // Numeric format <ejs-carousel [indicatorsType]="'Fraction'"> <!-- Shows: 1 / 5 --> </ejs-carousel> // Progress bar <ejs-carousel [indicatorsType]="'Progress'"> <!-- Visual progress bar --> </ejs-carousel> // Animated <ejs-carousel [indicatorsType]="'Dynamic'"> <!-- Animated indicator effect --> </ejs-carousel> ``` **indicatorsTemplate** - **Type:** `string | object` - **Default:** `null` - **Description:** Custom template for indicators (e.g., thumbnail previews). ```typescript <ejs-carousel [indicatorsTemplate]="'#indicatorTemplate'" [showIndicators]="true"> <ng-template #indicatorTemplate let-data let-index="index"> <img [src]="items[index]?.thumbnail" class="thumb" /> </ng-template> <e-carousel-items><!-- Items --></e-carousel-items> </ejs-carousel> ``` **showPlayButton** - **Type:** `boolean` - **Default:** `true` - **Description:** Shows or hides play button to resume auto-play. ```typescript <ejs-carousel [autoPlay]="false" [showPlayButton]="true"> <!-- Users can click play to resume auto-play --> </ejs-carousel> <ejs-carousel [showPlayButton]="false"> <!-- No play button visible --> </ejs-carousel> ``` **playButtonTemplate** - **Type:** `string | object` - **Default:** `null` - **Description:** Custom template for play button. ```typescript <ejs-carousel [playButtonTemplate]="'#playBtnTemplate'"> <ng-template #playBtnTemplate> <button class="play-btn">▶ Resume</button> </ng-template> <e-carousel-items><!-- Items --></e-carousel-items> </ejs-carousel> ``` #### 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 = [