import {Carousel} from 'primeng/primeng';
Carousel requires a collection of items as its value and a template to display each item. Template element should contain a li element as a wrapper.
<p-carousel [value]="items">
<template #item>
<li>
content of item
</li>
</ul>
</p-carousel>
Default number of visible items is 3, use numVisible option to customize this.
<p-carousel numVisible="1">
Following easing options are available for the slide effect; backBoth, backIn, backOut, bounceBoth, bounceIn, bounceOut, easeBoth, easeBothStrong, easeIn, easeInStrong, easeNone, easeOut, easeInOutCirc, easeOutStrong, elasticBoth, elasticIn, elasticOut.
<p-carousel easing="easeOutStrong">
Carousel can display the contents in a slideshow, for this purpose autoPlayInterval and circular attributes are used.
<p-carousel circular="circular" autoplayInterval="3000">
Responsive mode is enabled by default causing carousel to switch between small and large viewport depending on the breakpoint value which is 560 initially.
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 | easeInOutCirc | 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. |
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. |
PrimeUI Carousel.
<p-growl [value]="msgs"></p-growl>
<p-carousel headerText="Cars" [value]="cars">
<template #car>
<li>
<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: 'Volkswagen', 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});
}
}