import Carousel from 'primevue/carousel';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/carousel/carousel.min.js"></script>
Carousel requires a collection of items as its value along with a template to render each item.
<Carousel :value="cars">
<template #item="slotProps">
</template>
</Carousel>
Number of items per page is defined using the numVisible property whereas number of items to scroll is defined with the numScroll property.
<Carousel :value="cars" :numVisible="3" :numScroll="1">
<template #item="slotProps">
</template>
</Carousel>
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.
<Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #header>
<h2>Basic</h2>
</template>
<template #item="slotProps">
<div class="car-item">
<div class="car-content">
<div>
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" />
</div>
<div>
<div class="car-title">{{slotProps.data.brand}}</div>
<div class="car-subtitle">{{slotProps.data.year}} | {{slotProps.data.color}}</div>
<div class="car-buttons">
<Button icon="pi pi-search" class="p-button-secondary" />
<Button icon="pi pi-star-fill" class="p-button-secondary" />
<Button icon="pi pi-cog" class="p-button-secondary" />
</div>
</div>
</div>
</div>
</template>
</Carousel>
data() {
return {
responsiveOptions: [
{
breakpoint: '1024px',
numVisible: 3,
numScroll: 3
},
{
breakpoint: '600px',
numVisible: 2,
numScroll: 2
},
{
breakpoint: '480px',
numVisible: 1,
numScroll: 1
}
]
}
},
Custom content projection is available using the item, header and footer templates.
<Carousel :value="cars" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
<template #header>
<h2>Custom Header</h2>
</template>
<template #item="slotProps">
Content
</template>
<template #footer>
<h2>Custom Footer</h2>
</template>
</Carousel>
Default layout of the Carousel is horizontal, other possible option is the vertical mode that is configured with the orientation property.
<Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" :responsiveOptions="responsiveOptions">
<template #item="slotProps">
Content
</template>
</Carousel>
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.
<Carousel :value="cars" :numVisible="3" :numScroll="1" :circular="true" :autoplayInterval="3000">
<template #header>
<h2>Circular, AutoPlay</h2>
</template>
<template #item="slotProps">
Content
</template>
</Carousel>
| Name | Type | Default | Description |
|---|---|---|---|
| value | array | null | An array of objects to display. |
| page | number | null | Index of the first item. |
| circular | boolean | false | Defines if scrolling would be infinite. |
| autoplayInterval | number | null | Time in milliseconds to scroll items automatically. |
| numVisible | number | 1 | Number of items per page. |
| numScroll | number | 1 | Number of items to scroll. |
| responsiveOptions | any | null | An array of options for responsive design. |
| orientation | string | horizontal | Specifies the layout of the component, valid values are "horizontal" and "vertical". |
| verticalViewPortHeight | string | 300px | Height of the viewport in vertical layout. |
| contentClass | string | null | Style class of main content. |
| containerClass | string | null | Style class of the viewport container. |
| indicatorsContentClass | string | null | Style class of the indicator items. |
| showNavigators | boolean | true | Whether to display navigation buttons in container. |
| showIndicators | boolean | true | Whether to display indicator container. |
| Name | Parameters |
|---|---|
| header | - |
| item |
data: Data of the component index: Index of the item |
| footer | - |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-carousel | Container element. |
| p-carousel-header | Header section. |
| p-carousel-footer | Footer section. |
| p-carousel-content | Main content element. It contains the container of the viewport. |
| p-carousel-container | Container of the viewport. It contains navigation buttons and viewport. |
| p-carousel-items-content | Viewport. |
| p-carousel-indicators | Container of the indicators. |
| p-carousel-indicator | Indicator element. |
None.