Carousel Carousel displays content using a slide effect featuring responsive mode, swipe support for touch enabled devices and various customization options.

Import


import {Carousel} from 'primeng/primeng';

Getting Started

Carousel requires a collection of items as its value and a template to display each item. Template element should contain a li element having .ui-carousel-item style class as a wrapper.


<p-carousel [value]="items">
    <template let-item>
        <li class="ui-carousel-item">
            content of item
        </li>
    </ul>
</p-carousel>

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.

Attributes

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.

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

PrimeUI Carousel.


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

<p-carousel headerText="Cars" [value]="cars">
    <template let-car>
        <li class="ui-carousel-item">
            <div class="ui-grid ui-grid-responsive">
                <div class="ui-grid-row">
                    <div class="ui-grid-col-12"><img src="showcase/resources/demo/images/car/{{car.brand}}.gif" /></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>
        </li>
    </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});
    }
}