Carousel Carousel displays content using a slide effect featuring responsive mode, swipe support for touch enabled devices and various customization options.
Vin
{{car.vin}}
Year
{{car.year}}
Color
{{car.color}}

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
    </ul>
</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

Name Type Default Description
value array null Array of data to display.
numVisible number 3 Number of visible items per page.
firstVisible number 0 Index of the first visible item.
headerText string null Text of the header section.
effectDuration any 500 Duration of the scrolling animation in milliseconds or a predefined value like "slow", "normal" and "fast".
circular boolean false Defines continuous scrolling.
breakpoint number 560 Breakpoint value in pixels to switch between small and large viewport.
responsive boolean true When defined, causes carousel to adjust its width based on screen size.
autoplayInterval number 0 Time in milliseconds to have carousel start scrolling automatically.
easing string ease-out Easing animation to use for scrolling.
pageLinks number 3 Number of maximum page links to display. If total page count exceeds this value a dropdown is displayed instead.
style string null Inline style of the element.
styleClass string null Inline style of the element.

Events

Name Parameters Description
onPage event.page: New page index Callback to invoke on page change.

Styling

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

Name Element
ui-carousel Container element.
ui-carousel-header Header element.
ui-carousel-header-title Header text.
ui-carousel-viewport Viewport containing the items.
ui-carousel-button Navigator button at header.
ui-carousel-next-button Next page button at header.
ui-carousel-prev-button Previous page button at header.
ui-carousel-page-links Page links container.
ui-carousel-page-link A page link.
ui-carousel-mobiledropdown Cancel icon.
ui-carousel-item Cancel icon.

Dependencies

None.

 View on GitHub 

<p-growl [value]="msgs"></p-growl>

<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="fa-search" (click)="selectCar(car)"></button>
                </div>
            </div>
        </div>
    </ng-template>
</p-carousel>



export class CarouselDemo {

    cars: Car[];

    msgs: Message[];

    constructor() {
        this.msgs = [];
        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.msgs = [];
        this.msgs.push({severity: 'info', summary: 'Car Selected', detail: 'Vin:' + car.vin});
    }
}