Angular Carousel

Angular Carousel is a content slider featuring various customization options.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

Import

import {CarouselModule} from 'primeng/carousel';

Getting Started

Carousel requires a collection of items as its value along with a template to render each item.

<p-carousel [value]="cars">
    <ng-template let-car pTemplate="item">
        Content to display
    </ng-template>
</p-carousel>

Items Per Page and Scroll Items

Number of items per page is defined using the numVisible property whereas number of items to scroll is defined with the numScroll property.

<p-carousel [value]="cars" [numVisible]="3" [numScroll]="1">
    <ng-template let-car pTemplate="item">
        Content to display
    </ng-template>
</p-carousel>

Responsive

For responsive design, numVisible and numScroll can be defined using the responsiveOptions property that should be an array of objects whose breakpoint defines the max-width to apply the settings.

<p-carousel [value]="cars" [numVisible]="3" [numScroll]="1" [responsiveOptions]="responsiveOptions">
    <ng-template let-car pTemplate="item">
        Content to display
    </ng-template>
</p-carousel>

export class CarouselDemo {
    constructor(private carService: CarService) { 
        this.responsiveOptions = [
            {
                breakpoint: '1024px',
                numVisible: 3,
                numScroll: 3
            },
            {
                breakpoint: '768px',
                numVisible: 2,
                numScroll: 2
            },
            {
                breakpoint: '560px',
                numVisible: 1,
                numScroll: 1
            }
        ];
    }

    ngOnInit() {
        this.carService.getCarsSmall().then(cars => {
            this.cars = cars
        });
    }
}

Header and Footer

Custom content projection is available using the header and footer templates.

<p-carousel [value]="cars">
    <ng-template pTemplate="header">
        <h5>Vertical</h5>
    </ng-template>
    <ng-template let-car pTemplate="item">
        Content to display
    </ng-template>
</p-carousel>

Orientation

Default layout of the Carousel is horizontal, other possible option is the vertical mode that is configured with the orientation property.

<p-carousel [value]="cars" orientation="vertical">
    <ng-template let-car pTemplate="item">
        Content to display
    </ng-template>
</p-carousel>

AutoPlay and Circular

When autoplayInterval is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling circular property needs to be enabled. Note that in autoplay mode, circular is enabled by default.

<p-carousel [value]="cars" [autoplayInterval]="3000" [circular]="true">
    <ng-template pTemplate="header">
        <h5>Vertical</h5>
    </ng-template>
    <ng-template let-car pTemplate="item">
        Content to display
    </ng-template>
</p-carousel>

Theming

Carousel supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG Carousel showcase for demos and documentation.