MCPInstall

syncfusion-angular-carousel

by syncfusionFrontend & Design

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.

Installs
259
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/angular-ui-components-skills --skill syncfusion-angular-carousel
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads syncfusion-angular-carousel automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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:

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.
// 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.
<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.
<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.
<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.
// 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.
<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.
<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.
<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).
<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.
<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.
// 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).
<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.
<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.
<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).
// 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
<ejs-carousel [dataSource]="slides">
  <ng-template #itemTemplate let-item>
    <figure>
      <img [src]="item.image" [alt]="item.title" />
      <figcaption>{{item.title}}</figcaption>
    </figure>
  </ng-template>
</ejs-carousel>

itemTemplate

  • Type: string | object
  • Default: null
  • Description: Template for rendering each carousel item from dataSource.
<ejs-carousel [dataSource]="products">
  <ng-template #itemTemplate let-product>
    <div class="product-card">
      <img [src]="product.image" />
      <h3>{{product.name}}</h3>
      <p>${{product.price}}</p>
    </div>
  </ng-template>
</ejs-carousel>

items

  • Type: CarouselItem[]
  • Default: []
  • Description: Array of carousel items (use with e-carousel-item directive for static content).
<ejs-carousel>
  <e-carousel-items>
    <e-carousel-item>
      <ng-template #template><img src="image1.jpg" /></ng-template>
    </e-carousel-item>
    <e-carousel-item>
      <ng-template #template><img src="image2.jpg" /></ng-template>
    </e-carousel-item>
  </e-carousel-items>
</ejs-carousel>

cssClass

  • Type: string
  • Default: ''
  • Description: CSS class(es) for carousel container styling.
<ejs-carousel [cssClass]="'dark-theme full-width'">
  <!-- Apply custom styles via CSS classes -->
</ejs-carousel>

6. Interaction Properties

enableTouchSwipe

  • Type: boolean
  • Default: true
  • Description: Enables swiping on touch devices to navigate slides.
<ejs-carousel [enableTouchSwipe]="true">
  <!-- Touch swipe enabled -->
</ejs-carousel>

<ejs-carousel [enableTouchSwipe]="false">
  <!-- Touch swipe disabled -->
</ejs-carousel>

swipeMode

  • Type: 'Touch' | 'Mouse' | 'Touch|Mouse'
  • Default: 'Touch|Mouse'
  • Description: Which interaction types enable swiping.
// Both touch and mouse
<ejs-carousel [swipeMode]="'Touch|Mouse'" [enableTouchSwipe]="true">
  <!-- Both interactions work -->
</ejs-carousel>

// Touch only
<ejs-carousel [swipeMode]="'Touch'" [enableTouchSwipe]="true">
  <!-- Only touch gestures work -->
</ejs-carousel>

// Mouse only
<ejs-carousel [swipeMode]="'Mouse'" [enableTouchSwipe]="true">
  <!-- Only mouse drag works -->
</ejs-carousel>

allowKeyboardInteraction

  • Type: boolean
  • Default: true
  • Description: Allows arrow keys to navigate carousel.
<ejs-carousel [allowKeyboardInteraction]="true">
  <!-- Arrow keys navigate slides -->
</ejs-carousel>

<ejs-carousel [allowKeyboardInteraction]="false">
  <!-- Arrow keys disabled -->
</ejs-carousel>

7. Dimension Properties

height

  • Type: string | number
  • Default: '100%'
  • Description: Carousel container height (px, %, em, etc.).
// Fixed height
<ejs-carousel [height]="400">
  <!-- 400px height -->
</ejs-carousel>

// Percentage
<ejs-carousel [height]="'100%'">
  <!-- Full parent height -->
</ejs-carousel>

width

  • Type: string | number
  • Default: '100%'
  • Description: Carousel container width (px, %, em, etc.).
// Fixed width
<ejs-carousel [width]="800">
  <!-- 800px width -->
</ejs-carousel>

// Full width
<ejs-carousel [width]="'100%'">
  <!-- Full parent width -->
</ejs-carousel>

partialVisible

  • Type: boolean
  • Default: false
  • Description: Shows partial slides on sides for context.
<ejs-carousel [partialVisible]="true">
  <!-- Shows portion of adjacent slides -->
</ejs-carousel>

<ejs-carousel [partialVisible]="false">
  <!-- Only current slide fully visible -->
</ejs-carousel>

8. Localization and Persistence

locale

  • Type: string
  • Default: '' (uses browser locale)
  • Description: Locale/language for carousel (affects aria-labels, accessibility text).
<ejs-carousel [locale]="'de-DE'">
  <!-- German localization -->
</ejs-carousel>

<ejs-carousel [locale]="'fr-FR'">
  <!-- French localization -->
</ejs-carousel>

enablePersistence

  • Type: boolean
  • Default: false
  • Description: Saves carousel state to localStorage (restores on page reload).
<ejs-carousel [enablePersistence]="true">
  <!-- Current slide position saved and restored -->
</ejs-carousel>

9. Accessibility Properties

enableRtl

  • Type: boolean
  • Default: false
  • Description: Enables right-to-left layout for RTL languages.
<ejs-carousel [enableRtl]="true">
  <!-- RTL layout for Arabic, Hebrew, etc. -->
</ejs-carousel>

htmlAttributes

  • Type: Record<string, any>
  • Default: null
  • Description: Additional HTML attributes for carousel root element.
<ejs-carousel [htmlAttributes]="{ 'data-type': 'hero', 'aria-label': 'Hero Carousel' }">
  <!-- Custom attributes applied -->
</ejs-carousel>

Component Methods

5 Total Methods

1. next()

  • Signature: next(): void
  • Description: Navigate to next slide programmatically.
import { Component, ViewChild } from "@angular/core";
import { CarouselComponent } from "@syncfusion/ej2-angular-navigations";

@Component({
  selector: "app-carousel-nav",
  template: `
    <button (click)="goNext()">Next</button>
    <ejs-carousel #carousel>
      <e-carousel-items>
        <e-carousel-item><ng-template #template><img src="img1.jpg" /></ng-template></e-carousel-item>
        <e-carousel-item><ng-template #template><img src="img2.jpg" /></ng-template></e-carousel-item>
      </e-carousel-items>
    </ejs-carousel>
  `
})
export class CarouselNavComponent {
  @ViewChild("carousel") carousel!: CarouselComponent;

  goNext() {
    this.carousel.next();
  }
}

2. prev()

  • Signature: prev(): void
  • Description: Navigate to previous slide programmatically.
export class CarouselNavComponent {
  @ViewChild("carousel") carousel!: CarouselComponent;

  goPrev() {
    this.carousel.prev();
  }
}

3. play()

  • Signature: play(): void
  • Description: Resume automatic slide transitions.
import { Component, ViewChild } from "@angular/core";
import { CarouselComponent } from "@syncfusion/ej2-angular-navigations";

@Component({
  selector: "app-carousel-controls",
  template: `
    <button (click)="playSlides()">Play</button>
    <button (click)="pauseSlides()">Pause</button>
    <ejs-carousel #carousel [autoPlay]="false">
      <e-carousel-items>
        <e-carousel-item><ng-template #template><img src="img1.jpg" /></ng-template></e-carousel-item>
        <e-carousel-item><ng-template #template><img src="img2.jpg" /></ng-template></e-carousel-item>
      </e-carousel-items>
    </ejs-carousel>
  `
})
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.
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.
import { Component, ViewChild, OnDestroy } from "@angular/core";
import { CarouselComponent } from "@syncfusion/ej2-angular-navigations";

@Component({
  selector: "app-carousel-cleanup",
  template: `
    <ejs-carousel #carousel>
      <e-carousel-items>
        <e-carousel-item><ng-template #template><img src="img1.jpg" /></ng-template></e-carousel-item>
      </e-carousel-items>
    </ejs-carousel>
  `
})
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')
import { Component, ViewChild } from "@angular/core";
import { CarouselComponent, SlideChangingEventArgs } from "@syncfusion/ej2-angular-navigations";

@Component({
  selector: "app-carousel-event",
  template: `
    <div class="status">Cannot navigate to slide 2</div>
    <ejs-carousel #carousel (slideChanging)="onSlideChanging($event)">
      <e-carousel-items>
        <e-carousel-item><ng-template #template><img src="img1.jpg" /><p>Slide 1</p></ng-template></e-carousel-item>
        <e-carousel-item><ng-template #template><img src="img2.jpg" /><p>Slide 2 - BLOCKED</p></ng-template></e-carousel-item>
        <e-carousel-item><ng-template #template><img src="img3.jpg" /><p>Slide 3</p></ng-template></e-carousel-item>
      </e-carousel-items>
    </ejs-carousel>
  `
})
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')
import { Component, ViewChild } from "@angular/core";
import { CarouselComponent, SlideChangedEventArgs } from "@syncfusion/ej2-angular-navigations";

@Component({
  selector: "app-carousel-tracking",
  template: `
    <div class="slide-counter">Slide {{currentSlide}} of {{totalSlides}}</div>
    <ejs-carousel #carousel (slideChanged)="onSlideChanged($event)">
      <e-carousel-items>
        <e-carousel-item><ng-template #template><img src="img1.jpg" /></ng-template></e-carousel-item>
        <e-carousel-item><ng-template #template><img src="img2.jpg" /></ng-template></e-carousel-item>
        <e-carousel-item><ng-template #template><img src="img3.jpg" /></ng-template></e-carousel-item>
      </e-carousel-items>
    </ejs-carousel>
  `
})
export class CarouselTrackingComponent {
  currentSlide = 1;
  totalSlides = 3;

  onSlideChanged(args: SlideChangedEventArgs) {
    this.currentSlide = args.currentIndex + 1;
    console.log(`Now on slide ${args.currentIndex}`);
    console.log(`Direction: ${args.slideDirection}`);
    console.log(`Swiped: ${args.isSwiped}`);
  }
}

Default Values Reference

Complete table of default values for all 30 properties:

PropertyDefaultType
allowKeyboardInteractiontrueboolean
animationEffect'Slide'string
autoPlaytrueboolean
buttonsVisibility'Visible'string
cssClass''string
dataSourcenullany[]
enablePersistencefalseboolean
enableRtlfalseboolean
enableTouchSwipetrueboolean
height'100%'string/number
htmlAttributesnullRecord
indicatorsTemplatenullstring/object
indicatorsType'Default'string
interval5000number (ms)
itemTemplatenullstring/object
items[]CarouselItem[]
locale''string
looptrueboolean
nextButtonTemplatenullstring/object
partialVisiblefalseboolean
pauseOnHovertrueboolean
playButtonTemplatenullstring/object
previousButtonTemplatenullstring/object
selectedIndex0number
showIndicatorstrueboolean
showPlayButtontrueboolean
swipeMode'Touch|Mouse'string
width'100%'string/number

Common Patterns and Use Cases

Pattern 1: Data-Bound Carousel with Dynamic Content

When to use: Loading carousel items from an API or dynamic data source.

import { Component, OnInit } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Component({
  selector: "app-data-carousel",
  template: `
    <ejs-carousel [dataSource]="items" [selectedIndex]="0">
      <ng-template #itemTemplate let-item>
        <figure class="img-container">
          <img [src]="item.image" [alt]="item.title" />
          <figcaption>{{item.title}}</figcaption>
        </figure>
      </ng-template>
    </ejs-carousel>
  `
})
export class DataCarouselComponent implements OnInit {
  items: any[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get<any>('/api/carousel-items')
      .subscribe(data => this.items = data);
  }
}

Pattern 2: Manual Navigation with Buttons

When to use: Users control slide transitions with custom buttons instead of auto-play.

import { Component, ViewChild } from "@angular/core";
import { CarouselComponent } from "@syncfusion/ej2-angular-navigations";

@Component({
  selector: "app-manual-nav",
  template: `
    <div class="carousel-controls">
      <button (click)="prevSlide()" class="control-btn">← Previous</button>
      <span class="slide-counter">{{currentSlide}} / {{totalSlides}}</span>
      <button (click)="nextSlide()" class="control-btn">Next →</button>
    </div>
    <ejs-carousel 
      #carousel 
      [autoPlay]="false" 
      [buttonsVisibility]="'Hidden'"
      (slideChanged)="onSlideChanged($event)"
    >
      <e-carousel-items>
        <e-carousel-item *ngFor="let item of items">
          <ng-template #template>
            <img [src]="item.image" />
          </ng-template>
        </e-carousel-item>
      </e-carousel-items>
    </ejs-carousel>
  `
})
export class ManualNavCarouselComponent {
  @ViewChild("carousel") carousel!: CarouselComponent;
  
  items = [
    { image: 'image1.jpg' },
    { image: 'image2.jpg' },
    { image: 'image3.jpg' }
  ];
  
  currentSlide = 1;
  totalSlides = this.items.length;

  prevSlide() { this.carousel.prev(); }
  nextSlide() { this.carousel.next(); }

  onSlideChanged(event: any) {
    this.currentSlide = event.currentIndex + 1;
  }
}

Pattern 3: Event-Driven Carousel with Custom Handlers

When to use: Execute custom logic on slide transitions, track analytics, or prevent certain actions.

import { Component, ViewChild } from "@angular/core";
import { CarouselComponent, SlideChangingEventArgs, SlideChangedEventArgs } from "@syncfusion/ej2-angular-navigations";

@Component({
  selector: "app-event-carousel",
  template: `
    <div class="carousel-stats">
      <p>Total Views: {{viewCount}}</p>
      <p>Current: {{lastViewedSlide}}</p>
    </div>
    <ejs-carousel 
      #carousel 
      (slideChanging)="onSlideChanging($event)"
      (slideChanged)="onSlideChanged($event)"
    >
      <e-carousel-items>
        <e-carousel-item *ngFor="let item of slides">
          <ng-template #template>
            <img [src]="item.image" />
            <h3>{{item.title}}</h3>
          </ng-template>
        </e-carousel-item>
      </e-carousel-items>
    </ejs-carousel>
  `
})
export class EventCarouselComponent {
  @ViewChild("carousel") carousel!: CarouselComponent;

  slides = [
    { title: 'Slide 1', image: 'image1.jpg' },
    { title: 'Slide 2', image: 'image2.jpg' },
    { title: 'Slide 3', image: 'image3.jpg' }
  ];

  viewCount = 0;
  lastViewedSlide = '';

  onSlideChanging(args: SlideChangingEventArgs) {
    // Example: Prevent returning to first slide
    if (args.previousIndex === 1 && args.nextIndex === 0) {
      console.log("Blocking return to first slide");
      // args.cancel = true; // Uncomment to prevent
    }
  }

  onSlideChanged(args: SlideChangedEventArgs) {
    this.viewCount++;
    this.lastViewedSlide = this.slides[args.currentIndex].title;
    
    // Log analytics
    console.log(`Viewed slide ${args.currentIndex} via ${args.slideDirection}`);
  }
}

Implementation Guides

For detailed implementation on specific topics, see:

  • Getting Started – Installation, setup, CSS imports, basic configuration
  • Item Population & Data – dataSource, templates, data binding, navigation
  • Navigation & Indicators – Button controls, indicator types, customization
  • Animations & Transitions – Animation effects, auto-play, event handling
  • Styling & Appearance – CSS customization, themes, WebP, responsive

Next Steps

  1. Choose your data approach: Use items binding for static content, dataSource for dynamic data
  2. Select navigation style: Buttons, indicators, or both
  3. Decide on animations: None, Slide (default), Fade, or custom CSS effects
  4. Configure auto-play: Set interval and pause behavior
  5. Handle events: Listen to slideChanging and slideChanged for custom logic
  6. Style your carousel: Apply CSS classes and responsive design
  7. Test interactions: Verify touch/keyboard navigation and event handling

See reference files for detailed implementation examples and best practices.

FAQ

What does the syncfusion-angular-carousel skill do?

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.

How do I install syncfusion-angular-carousel?

Run npx skills add https://github.com/syncfusion/angular-ui-components-skills --skill syncfusion-angular-carousel in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-angular-carousel/ (personal) or .claude/skills/syncfusion-angular-carousel/ (project).

Which AI agents can use syncfusion-angular-carousel?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-angular-carousel safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-angular-carousel?

It is published by syncfusion in syncfusion/angular-ui-components-skills. It has 259 recorded installs.

More from syncfusion/angular-ui-components-skills

View all →

syncfusion-angular-grid

syncfusion/angular-ui-components-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design342 installs

syncfusion-angular-common

syncfusion/angular-ui-components-skills

Common utilities and features for Syncfusion Angular components. Use this skill when the user needs to implement animations, drag-and-drop, state persistence, RTL support, localization, globalization, security, templates, and advanced features for Syncfusion Angular components.

Frontend & Design327 installs

syncfusion-angular-chart

syncfusion/angular-ui-components-skills

Implement Syncfusion Angular Chart component for professional data visualization. Use this when creating or customizing charts such as line, bar, column, area, pie, financial (candlestick, OHLC), scatter, bubble, or stock charts. Supports axes configuration, series binding, legends, tooltips, zooming, real-time updates, technical indicators, themes, export, and accessibility features.

Frontend & Design321 installs

syncfusion-angular-license

syncfusion/angular-ui-components-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design319 installs

syncfusion-angular-themes

syncfusion/angular-ui-components-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design319 installs

syncfusion-angular-rich-text-editor

syncfusion/angular-ui-components-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design317 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs