syncfusion-angular-carousel

What this skill does

# 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'">