Angular Carousel Component Overview
Ignite UI for Angular Carousel is a responsive, lightweight component that provides the most flexible way to create slideshow-like web experience for users who navigate back and forth through a collection of images with text slides, links, and other html elements.
The Angular Carousel component allows you to use animations, slide transitions, and customization so you can easily tweak the interface and build Angular custom carousel.
Angular Carousel Example
The Angular Carousel demo you see below shows slides containing only images. We’ve enabled navigation buttons allowing users to easily move from one slide to another – going back and forth.
Getting Started with Ignite UI for Angular Carousel
To get started with the Ignite UI for Angular Carousel component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:
ng add igniteui-angular
For a complete introduction to the Ignite UI for Angular, read the getting started topic.
The next step is to import the IgxCarouselModule in our app.module.ts file:
Note
This component can utilize the HammerModule
optionally. It can be imported in the root module of the application in order for touch interactions to work as expected.
// app.module.ts
import { HammerModule } from '@angular/platform-browser';
import { IgxCarouselModule } from 'igniteui-angular';
// import { IgxCarouselModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., HammerModule, IgxCarouselModule],
...
})
export class AppModule {}
Alternatively, as of 16.0.0
you can import the IgxCarouselComponent
as a standalone dependency, or use the IGX_CAROUSEL_DIRECTIVES
token to import the component and all of its supporting components and directives.
// home.component.ts
import { HammerModule } from '@angular/platform-browser';
import { IGX_CAROUSEL_DIRECTIVES } from 'igniteui-angular';
// import { IGX_CAROUSEL_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<igx-carousel>
<igx-slide *ngFor="let slide of slides">
<div class="image-container">
<img [src]="slide.src" />
</div>
</igx-slide>
</igx-carousel>
`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [HammerModule, IGX_CAROUSEL_DIRECTIVES]
/* or imports: [HammerModule, IgxCarouselComponent, IgxSlideComponent] */
})
export class HomeComponent {}
Now that you have the Ignite UI for Angular Carousel module or directives imported, you can start using the igx-carousel
component.
Using the Angular Carousel Component
The Ignite UI for Angular Carousel component can be used as a full-screen element or situated inside another component. Also, the slides may feature any valid html content inside, including other Angular components.
In this section we will go through the setup of the above defined demo.
Adding slides with *ngFor
If we have slides with the same type of content, the easiest approach is to use *ngFor to add them in the template.
Since our slides are going to contain only images, we are going to create an array of objects in the ts file and use it to populate the igx-carousel with slides:
@Component({...})
export class HomeComponent {
public slides = [
{ src: '/assets/images/carousel/ignite-ui-angular-indigo-design.png' },
{ src: '/assets/images/carousel/slider-image-chart.png' },
{ src: '/assets/images/carousel/ignite-ui-angular-charts.png' }
];
}
<div class="carousel-container">
<igx-carousel #carousel>
<igx-slide *ngFor="let slide of slides">
<div class="image-container">
<img [src]="slide.src" />
</div>
</igx-slide>
</igx-carousel>
</div>
Angular Carousel Custom Examples
Configuring IgxCarousel
By default, the Carousel in Angular has its loop
input property set to true
( looping occurs when the first slide comes after the last by navigating using the Next action, or when the last slide comes after the first by using the Previous action ). The looping behavior can be disabled by setting the value of the loop
input to false
.
To keep track of each slide index, the carousel has indicators that are positioned at the bottom
of the carousel by default. In order to change this behavior, we have to use the indicatorsOrientation property and assign it to top
. Indicators can be disabled by adding an empty template.
The carousel template may look like this:
<div class="carousel-container">
<igx-carousel #carousel [loop]="false">
...
<!-- Adding an empty template to disable carousel's indicators -->
<ng-template igxCarouselIndicator></ng-template>
</igx-carousel>
</div>
Custom indicators
To add Angular custom carousel indicators we will have to use the IgxCarouselIndicatorDirective, like this:
...
<ng-template igxCarouselIndicator let-slide>
<div [ngClass]="{'selected': slide.current === current}"></div>
</ng-template>
...
Custom nav buttons
To achieve this we will use the IgxCarouselPrevButtonDirective and IgxCarouselNextButtonDirective directives:
...
<ng-template igxCarouselNextButton let-disabled>
<button igxButton="fab" igxRipple="white" [disabled]="disabled">
<igx-icon fontSet="material">navigate_next</igx-icon>
</button>
</ng-template>
<ng-template igxCarouselPrevButton let-disabled>
<button igxButton="fab" igxRipple="white" [disabled]="disabled">
<igx-icon fontSet="material">navigate_before</igx-icon>
</button>
</ng-template>
...
Slide containing other components
This carousel is going to contain slides with forms and images:
...
<div class="carousel-container">
<igx-carousel>
<igx-slide>
<div class="slide-content-wrapper">
<img src="assets/images/svg/carousel/SignUp.svg">
<form #form class="signInForm">
<igx-input-group>
<igx-prefix>
<igx-icon>person</igx-icon>
</igx-prefix>
<label style="display: flex;" igxLabel for="username">Username</label>
<input igxInput id="username" type="text" />
</igx-input-group>
<igx-input-group>
<igx-prefix>
<igx-icon>lock</igx-icon>
</igx-prefix>
<label style="display: flex;" igxLabel for="password">Password</label>
<input igxInput id="password" type="password" />
</igx-input-group>
</form>
<div class="btn">
<button igxButton="contained" type="submit" (click)="form.reset()">Sign In</button>
</div>
</div>
</igx-slide>
<igx-slide>
<div class="slide-content-wrapper">
<img src="assets/images/svg/carousel/Route.svg">
<form #form2 class="searchForm">
<igx-input-group>
<igx-prefix>
<igx-icon>search</igx-icon>
</igx-prefix>
<label style="display: flex;" igxLabel for="username">Search</label>
<input igxInput id="search" type="text" />
</igx-input-group>
</form>
<div class="btn">
<button igxButton="contained" type="submit" (click)="form2.reset()">Search</button>
</div>
</div>
</igx-slide>
</igx-carousel>
</div>
...
Demo
Angular Carousel Animations
Animated slide transitions provide the end-users a nice experience when interacting with the carousel.
The carousel is configured to use the slide
animation by default but it also supports fade
as an alternative animation.
The animations are configured through the animationType input, like this:
<igx-carousel animationType="fade">
...
</igx-carousel>
Setting none
to the animationType
input disables carousel's animations.
Demo
The demo below demonstrates the different types of animations, which the carousel supports.
Navigation
Transition and navigation are the most important carousel features.
The navigation in the carousel can be handled by the user through navigation buttons, keyboard navigation and pan interaction on mobile devices.
Pan gestures
By default, the carousel can be used on any touch-enabled device. This is optional and can be changed by setting the gesturesSupport property to false
.
The carousel animations are fully supported on touch devices, which makes the carousel consistent with any platform and great when used in progressive web applications (PWA).
Keyboard navigation
- To navigate to the next/previous slide, you have to use, respectfully:
Arrow Right
key for the next slideArrow Left
key for the previous slide
- To navigate to the end/start slide you have to use, respectfully:
End
key for the end slideHome
key for the start slide
Automatic transitioning
The IgxCarousel can be easily configured to change the slides automatically, without any user interaction. This way you can create your own slideshow by only setting a transition interval to the interval property, which determines the amount of time in milliseconds between slides transition.
Note
The automatic slide transitioning is not entirely user-independent by default. Positioning the mouse pointer over a slide will interrupt the current slide transition until the mouse pointer leaves the slide area. This can be prevented by setting pause property to false
.
Advanced Example
Let's create a fully automated carousel with looping enabled. Each slide will be synced with a list item in a list. Clicking on a list item will trigger a slide change.
To achieve this goal, we have to do the following configurations to the carousel:
- disable
gesturesSupport
- disable the
navigation
buttons - disable the carousel
indicators
- disable the
pause
on user interaction with the slide - add transition
interval
Our carousel will look like this in the template:
...
<div class="carousel-wrapper">
<igx-carousel [navigation]="false" [pause]="false" animationType="fade" [interval]="2000" [gesturesSupport]="false">
<div class="slides-wrapper">
<igx-slide *ngFor="let item of slides">
<!-- Slides content goes here -->
</igx-slide>
</div>
<!-- Adding an empty template to disable carousel's indicators -->
<ng-template igxCarouselIndicator></ng-template>
</igx-carousel>
</div>
...
We are ready with the carousel configuration. Now we need only to add a list component and sync the both components:
adding IgxList:
...
<div class="list-wrapper">
<igx-list>
<!-- Adding disabled classes when the list item index does not match the current slide index-->
<igx-list-item *ngFor="let item of slides; let i=index" [ngClass]="{'disabled': i !== currentIndex }" >
<!-- List item content goes here -->
</igx-list-item>
</igx-list>
</div>
...
syncing the components by hooking up on carousel's slideChanged
and list's itemClicked events:
Note
As of v15.1.0 onSlideChanged
was renamed to slideChanged
. Using ng update
will automatically migrate your code prior to use the new event name.
public ngOnInit() {
this.list.itemClicked.subscribe((args: IListItemClickEventArgs) => {
this.currentIndex = args.item.index;
this.carousel.select(this.carousel.get(this.currentIndex));
});
this.carousel.slideChanged.subscribe((args: ISlideEventArgs) => {
this.currentIndex = args.slide.index;
});
}
These configurions will have the following result:
Accessibility
WAI-ARIA Roles, States, and Properties
- The Carousel base element role is
region
- section containing content that is relevant to specific purpose and users will likely want to be able to navigate easily. - Carousel indicators are with role
tab
- grouping label providing a mechanism for selecting the tab content that is to be rendered to the user - The element that serves as the container for the set of tabs (carousel indicators) role is set to
tablist
. - Each slide element is set with role
tabpanel
. - The element that serves as the container for the set of igx-slides is set with aria-live="polite". Both options are
- off: if the carousel is automatically rotating.
- polite: if the carousel is NOT automatically rotating.
ARIA support
Carousel component
Attributes:
- aria-roledescription set to 'carousel'.
- aria-selected- set to true or false based on the active slide.
- aria-controls - set a slide index whose content is controlled by the current element.
- aria-live - used to set the priority with which screen reader should treat updates to live regions - the possible settings are: off and polite. The default setting is polite. When the interval option set, the aria-live attribute would be set to off.
- aria-label slide based.
- aria-label (buttons)
- aria-label - for previous slide.
- aria-label - for next slide.
Slide component
Roles:
- attr.role="tabpanel" - container for the resources associated with a tab, where each tab is contained in a tablist.
Attributes:
- id - follows the pattern "panel-${this.index}"
- aria-labelledby follows the pattern "tab-${this.index}-${this.total}"
- aria-selected set active slide. Indicates the current selected state of a particular slide element.
API References
- IgxCarouselComponent
- IgxCarouselComponent Styles
- IgxSlideComponent
- IgxListComponent
- IgxListItemComponent
Theming Dependencies
Additional Resources
Our community is active and always welcoming to new ideas.