CarouselCarousel displays content using a slide effect featuring responsive mode and various customization options.

Documentation

Import

import {CarouselModule} from 'primeng/carousel';
 

Getting Started

Carousel requires a collection of items as its value and a ng-template content to display where each item can be accessed using the implicit variable.

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

Managing Data

DataTable uses setter based checking to realize if the underlying data has changed to update the UI so your data changes such as adding or removing a record should always create a new array reference instead of manipulating an existing array. For example, use slice instead of splice when removing an item or use spread operator instead of push method when adding an item.

Limiting Visible Items

Default number of visible items is 3, use numVisible option to customize this.

<p-carousel numVisible="1">
 

Effects

The easing function to use is "ease-out" by default and this can be customized using easing property. See here for possible alternative values.

<p-carousel easing="easeOutStrong">
 

SlideShow

Carousel can display the contents in a slideshow, for this purpose autoPlayInterval and circular attributes are used.

<p-carousel circular="circular" autoplayInterval="3000">
 

Responsive

Responsive mode is enabled by default causing carousel to switch between small and large viewport depending on the breakpoint value which is 560 initially.

Properties

Events

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Dependencies

None.

Source

View on GitHub

<p-toast [style]="{marginTop: '80px'}"></p-toast>
<p-carousel headerText="Cars" [value]="cars">
    <ng-template let-car pTemplate="item">
        <div class="ui-grid ui-grid-responsive">
            <div class="ui-grid-row">
                <div class="ui-grid-col-12"><img src="assets/showcase/images/demo/car/{{car.brand}}.png" width="60"></div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-6">Vin</div>
                <div class="ui-grid-col-6">{{car.vin}}</div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-6">Year</div>
                <div class="ui-grid-col-6">{{car.year}}</div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-6">Color</div>
                <div class="ui-grid-col-6">{{car.color}}</div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-12">
                    <button type="button" pButton icon="pi pi-search" (click)="selectCar(car)"></button>
                </div>
            </div>
        </div>
    </ng-template>
</p-carousel>
 

export class CarouselDemo {
    cars: Car[];
    constructor(private messageService: MessageService) {
        this.cars = [
            {vin: 'r3278r2', year: 2010, brand: 'Audi', color: 'Black'},
            {vin: 'jhto2g2', year: 2015, brand: 'BMW', color: 'White'},
            {vin: 'h453w54', year: 2012, brand: 'Honda', color: 'Blue'},
            {vin: 'g43gwwg', year: 1998, brand: 'Renault', color: 'White'},
            {vin: 'gf45wg5', year: 2011, brand: 'VW', color: 'Red'},
            {vin: 'bhv5y5w', year: 2015, brand: 'Jaguar', color: 'Blue'},
            {vin: 'ybw5fsd', year: 2012, brand: 'Ford', color: 'Yellow'},
            {vin: '45665e5', year: 2011, brand: 'Mercedes', color: 'Brown'},
            {vin: 'he6sb5v', year: 2015, brand: 'Ford', color: 'Black'}
        ];
    }
    selectCar(car: Car) {
        this.messageService.add({severity: 'info', summary: 'Car Selected', detail: 'Vin:' + car.vin});
    }
}