Angular Carousel Component

Carousel

Angular Carousel is a slideshow component for cycling through elements—images or slides of text—like a carousel.

Available in Other JavaScript Frameworks

CoreUI Angular Carousel Component is also available for Bootstrap, React, and Vue. Explore framework-specific implementations below:

On this page

How it works

The Angular carousel is a slideshow for cycling within a group of content. It runs with a group of images, text, or html elements. It also incorporates support for previous/next buttons.

In browsers where the Page Visibility API open in new window is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc).

Example

Carousels don’t automatically normalize slide dimensions. As such, you may want to use extra utilities or custom methods to properly size content. While carousels support previous/next controls and indicators, they’re not explicitly expected. Add and customize as you see fit.

Slides only

import { Component, OnInit } from '@angular/core';
import { CarouselComponent, CarouselInnerComponent, CarouselItemComponent } from '@coreui/angular';

@Component({
  selector: 'docs-carousel-slides-only',
  templateUrl: './carousel-slides-only.component.html',
  imports: [CarouselComponent, CarouselInnerComponent, CarouselItemComponent]
})
export class CarouselSlidesOnlyComponent implements OnInit {
  slides: any[] = new Array(3).fill({ id: -1, src: '', title: '', subtitle: '' });

  ngOnInit(): void {
    this.slides[0] = {
      src: '/assets/img/angular.jpg'
    };
    this.slides[1] = {
      src: '/assets/img/react.jpg'
    };
    this.slides[2] = {
      src: '/assets/img/vue.jpg'
    };
  }

  onItemChange($event: any): void {
    console.log('Carousel onItemChange', $event);
  }
}

<c-carousel (itemChange)="onItemChange($event)" [interval]="5000" transition="slide">
  <c-carousel-inner>
    @for (slide of slides; track slide.src) {
      <c-carousel-item>
        <img
          [src]="slide.src"
          alt="{{slide.title}}"
          class="d-block w-100"
          loading="lazy"
        />
      </c-carousel-item>
    }
  </c-carousel-inner>
</c-carousel>

With controls

Adding in the previous and next controls with c-carousel-controls component.

import { Component, OnInit } from '@angular/core';
import { RouterLink } from '@angular/router';
import {
  CarouselComponent,
  CarouselControlComponent,
  CarouselInnerComponent,
  CarouselItemComponent
} from '@coreui/angular';

@Component({
  selector: 'docs-carousel-with-controls',
  templateUrl: './carousel-with-controls.component.html',
  imports: [CarouselComponent, CarouselInnerComponent, CarouselItemComponent, CarouselControlComponent, RouterLink]
})
export class CarouselWithControlsComponent implements OnInit {
  slides: any[] = new Array(3).fill({ id: -1, src: '', title: '', subtitle: '' });

  ngOnInit(): void {
    this.slides[0] = {
      src: '/assets/img/angular.jpg'
    };
    this.slides[1] = {
      src: '/assets/img/react.jpg'
    };
    this.slides[2] = {
      src: '/assets/img/vue.jpg'
    };
  }
}

<c-carousel [interval]="0">
  <c-carousel-inner>
    @for (slide of slides; track slide.src) {
      <c-carousel-item>
        <img
          [src]="slide.src"
          alt="{{slide.title}}"
          class="d-block w-100"
          loading="lazy"
        />
      </c-carousel-item>
    }
  </c-carousel-inner>
  <c-carousel-control [routerLink] caption="Previous" direction="prev" />
  <c-carousel-control [routerLink] caption="Next" direction="next" />
</c-carousel>

With indicators

You can attach the indicators to the carousel, lengthwise the controls, too.

import { Component, OnInit } from '@angular/core';
import { RouterLink } from '@angular/router';
import {
  CarouselComponent,
  CarouselConfig,
  CarouselControlComponent,
  CarouselIndicatorsComponent,
  CarouselInnerComponent,
  CarouselItemComponent
} from '@coreui/angular';
import { CarouselCustomConfig } from './carousel.config';

@Component({
  selector: 'docs-carousel-with-indicators',
  templateUrl: './carousel-with-indicators.component.html',
  imports: [
    CarouselComponent,
    CarouselIndicatorsComponent,
    CarouselInnerComponent,
    CarouselItemComponent,
    CarouselControlComponent,
    RouterLink
  ],
  providers: [{ provide: CarouselConfig, useClass: CarouselCustomConfig }]
})
export class CarouselWithIndicatorsComponent implements OnInit {
  slides: any[] = new Array(3).fill({ id: -1, src: '', title: '', subtitle: '' });

  ngOnInit(): void {
    this.slides[0] = {
      src: '/assets/img/angular.jpg'
    };
    this.slides[1] = {
      src: '/assets/img/react.jpg'
    };
    this.slides[2] = {
      src: '/assets/img/vue.jpg'
    };
  }
}

<c-carousel>
  <c-carousel-indicators />
  <c-carousel-inner>
    @for (slide of slides; track slide.src) {
      <c-carousel-item>
        <img
          [src]="slide.src"
          alt="{{ slide.title }}"
          class="d-block w-100"
          loading="lazy" />
      </c-carousel-item>
    }
  </c-carousel-inner>
  <c-carousel-control [routerLink] caption="Previous" direction="prev" />
  <c-carousel-control [routerLink] caption="Next" direction="next" />
</c-carousel>

import { Injectable } from '@angular/core';

@Injectable()
export class CarouselCustomConfig {
  /* Animate transition of slides */
  activeIndex = 0;
  /* Animate transition of slides */
  animate = true;
  /* Default direction of auto changing of slides */
  direction: 'next' | 'prev' = 'next';
  /* Default interval of auto changing of slides */
  interval? = 3000;
}

With captions

You can add captions to slides with the <c-carousel-caption> element within any <c-carousel-item>. They can be immediately hidden on smaller viewports, as shown below, with optional display utilities We hide them with .d-none and draw them back on medium-sized devices with .d-md-block.

import { Component, OnInit } from '@angular/core';
import { RouterLink } from '@angular/router';
import {
  CarouselCaptionComponent,
  CarouselComponent,
  CarouselControlComponent,
  CarouselIndicatorsComponent,
  CarouselInnerComponent,
  CarouselItemComponent
} from '@coreui/angular';

@Component({
  selector: 'docs-carousel-with-captions',
  templateUrl: './carousel-with-captions.component.html',
  imports: [
    CarouselComponent,
    CarouselIndicatorsComponent,
    CarouselInnerComponent,
    CarouselItemComponent,
    CarouselCaptionComponent,
    CarouselControlComponent,
    RouterLink
  ]
})
export class CarouselWithCaptionsComponent implements OnInit {
  slides: any[] = new Array(3).fill({ id: -1, src: '', title: '', subtitle: '' });

  ngOnInit(): void {
    this.slides[0] = {
      id: 0,
      src: '/assets/img/angular.jpg',
      title: 'First slide',
      subtitle: 'Nulla vitae elit libero, a pharetra augue mollis interdum.'
    };
    this.slides[1] = {
      id: 1,
      src: '/assets/img/react.jpg',
      title: 'Second slide',
      subtitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
    };
    this.slides[2] = {
      id: 2,
      src: '/assets/img/vue.jpg',
      title: 'Third slide',
      subtitle: 'Praesent commodo cursus magna, vel scelerisque nisl consectetur.'
    };
  }
}

<c-carousel>
  <c-carousel-indicators />
  <c-carousel-inner>
    @for (slide of slides; track slide.src) {
      <c-carousel-item>
        <img
          alt="{{slide.title}}"
          class="d-block w-100"
          loading="lazy"
          src="{{slide.src}}"
        />
        <c-carousel-caption class="d-none d-md-block">
          <h3>{{ slide.title }}</h3>
          <p>{{ slide.subtitle }}</p>
        </c-carousel-caption>
      </c-carousel-item>
    }
  </c-carousel-inner>
  <c-carousel-control [routerLink] caption="Previous" direction="prev" />
  <c-carousel-control [routerLink] caption="Next" direction="next" />
</c-carousel>

Crossfade

Add transition="crossfade" to your carousel to animate slides with a fade transition instead of a slide.

import { Component, OnInit } from '@angular/core';
import { RouterLink } from '@angular/router';
import {
  CarouselComponent,
  CarouselControlComponent,
  CarouselInnerComponent,
  CarouselItemComponent
} from '@coreui/angular';

@Component({
  selector: 'docs-carousel-crossfade',
  templateUrl: './carousel-crossfade.component.html',
  imports: [CarouselComponent, CarouselInnerComponent, CarouselItemComponent, CarouselControlComponent, RouterLink]
})
export class CarouselCrossfadeComponent implements OnInit {
  slides: any[] = new Array(3).fill({ id: -1, src: '', title: '', subtitle: '' });

  ngOnInit(): void {
    this.slides[0] = {
      id: 0,
      src: '/assets/img/angular.jpg',
      title: 'First slide',
      subtitle: 'Nulla vitae elit libero, a pharetra augue mollis interdum.'
    };
    this.slides[1] = {
      id: 1,
      src: '/assets/img/react.jpg',
      title: 'Second slide',
      subtitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
    };
    this.slides[2] = {
      id: 2,
      src: '/assets/img/vue.jpg',
      title: 'Third slide',
      subtitle: 'Praesent commodo cursus magna, vel scelerisque nisl consectetur.'
    };
  }
}

<c-carousel transition="crossfade">
  <c-carousel-inner>
    @for (slide of slides; track slide.src) {
      <c-carousel-item>
        <img
          [src]="slide.src"
          alt="{{slide.title}}"
          class="d-block w-100"
          loading="lazy"
        />
      </c-carousel-item>
    }
  </c-carousel-inner>
  <c-carousel-control [routerLink] caption="Previous" direction="prev" />
  <c-carousel-control [routerLink] caption="Next" direction="next" />
</c-carousel>

Dark variant

Add dark property to the c-carousel for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the filter CSS property. Captions and controls have additional Sass variables that customize the color and background-color.

import { Component, OnInit } from '@angular/core';
import { RouterLink } from '@angular/router';
import {
  CarouselCaptionComponent,
  CarouselComponent,
  CarouselControlComponent,
  CarouselIndicatorsComponent,
  CarouselInnerComponent,
  CarouselItemComponent
} from '@coreui/angular';

@Component({
  selector: 'docs-carousel-dark-variant',
  templateUrl: './carousel-dark-variant.component.html',
  imports: [
    CarouselComponent,
    CarouselIndicatorsComponent,
    CarouselInnerComponent,
    CarouselItemComponent,
    CarouselCaptionComponent,
    CarouselControlComponent,
    RouterLink
  ]
})
export class CarouselDarkVariantComponent implements OnInit {
  slides: any[] = new Array(3).fill({ id: -1, src: '', title: '', subtitle: '' });

  ngOnInit(): void {
    this.slides[0] = {
      id: 0,
      src: '/assets/img/angular.jpg',
      title: 'First slide',
      subtitle: 'Nulla vitae elit libero, a pharetra augue mollis interdum.'
    };
    this.slides[1] = {
      id: 1,
      src: '/assets/img/react.jpg',
      title: 'Second slide',
      subtitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
    };
    this.slides[2] = {
      id: 2,
      src: '/assets/img/vue.jpg',
      title: 'Third slide',
      subtitle: 'Praesent commodo cursus magna, vel scelerisque nisl consectetur.'
    };
  }
}

<c-carousel [dark]="true" [wrap]="false">
  <c-carousel-indicators />
  <c-carousel-inner>
    @for (slide of slides; track slide.src) {
      <c-carousel-item>
        <img
          [src]="slide.src"
          alt="{{slide.title}}"
          class="d-block w-100"
          loading="lazy"
        />
        <c-carousel-caption class="d-none d-md-block">
          <h3>{{ slide.title }}</h3>
          <p>{{ slide.subtitle }}</p>
        </c-carousel-caption>
      </c-carousel-item>
    }
  </c-carousel-inner>
  <c-carousel-control [routerLink] caption="Previous" direction="prev" />
  <c-carousel-control [routerLink] caption="Next" direction="next" />
</c-carousel>

API reference

CarouselModule

import { CarouselModule } from '@coreui/angular';

@NgModule({
    imports: [CarouselModule,]
})
export class AppModule() { }

c-carousel

component

jsx

import { CarouselComponent } from '@coreui/angular'

Props

Property	Default	Type
activeIndex	`0`	`number`
Index of the active item.
animate	`true`	`boolean`
Carousel automatically starts cycle items.
dark	`false`	`boolean`
Sets a darker color scheme. If the colorScheme is set to 'dark', the dark theme will be applied.
direction	`'next'`	`'next'`, `'prev'`
Carousel direction
interval	`-1`	`number`
The amount of time to delay between automatically cycling an item. If -1, carousel will not automatically cycle.
pause	`'hover'`	`false`, `Triggers`, `Triggers[]`
Sets which event handlers you’d like provided to your pause prop. You can specify one trigger or an array of them.
touch	`true`	`boolean`
Support left/right swipe interactions on touchscreen devices.
transition	`'slide'`	`'slide'`, `'crossfade'`
Set the type of the transition.
wrap	`true`	`boolean`
Set whether the carousel should cycle continuously or have hard stops.

Events

Event name

Event name
itemChange
Event emitted on carousel item change `$event` `number`

itemChange

Event emitted on carousel item change

$event number

c-carousel-caption

component

jsx

import { CarouselCaptionComponent } from '@coreui/angular'

c-carousel-control

component

jsx

import { CarouselControlComponent } from '@coreui/angular'

Property	Default	Type
caption	`undefined`	`string`
Carousel control caption
direction	`'next'`	`'prev'`, `'next'`
Carousel control direction.
role	`'button'`	`string`
Carousel control role.

c-carousel-indicators

component

jsx

import { CarouselIndicatorsComponent } from '@coreui/angular'

c-carousel-inner

component

jsx

import { CarouselInnerComponent } from '@coreui/angular'

c-carousel-item

component

jsx

import { CarouselItemComponent } from '@coreui/angular'

Property	Default	Type
interval	`-1`	`number`
Time delay before cycling to the next item. If -1, uses carousel interval value.
role	`'group'`	`string`
Carousel item role.