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. |
| prevButtonProps | object | null | Uses to pass all properties of the HTMLButtonElement to the previous navigation button. |
| nextButtonProps | object | null | Uses to pass all properties of the HTMLButtonElement to the next navigation button. |
| 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. |
Carousel uses region role and since any attribute is passed to the main container element, attributes such as aria-label and aria-roledescription can be used as well. The slides container has aria-live attribute set as "polite" if carousel is not in autoplay mode, otherwise "off" would be the value in autoplay.
A slide has a group role with an aria-label that refers to the aria.slideNumber property of the
Next and Previous navigators are button elements with aria-label attributes referring to the aria.prevPageLabel and aria.nextPageLabel properties of the
Quick navigation elements are button elements with an aria-label attribute referring to the aria.pageLabel of the
| Key | Function |
|---|---|
| tab | Moves focus through interactive elements in the carousel. |
| enter | Activates navigation. |
| space | Activates navigation. |
| Key | Function |
|---|---|
| tab | Moves focus through the active slide link. |
| enter | Activates the focused slide link. |
| space | Activates the focused slide link. |
| right arrow | Moves focus to the next slide link. |
| left arrow | Moves focus to the previous slide link. |
| home | Moves focus to the first slide link. |
| end | Moves focus to the last slide link. |
None.