React Carousel

React Carousel is a content slider featuring various customization options.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import { Carousel } from 'primereact/carousel';

Getting Started

Carousel requires a collection of items as its value along with a template to render each item.

<Carousel value={products} itemTemplate={itemTemplate}></Carousel>

const itemTemplate = (car) => {
    // return content;
}

Items per page and Scroll Items

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={products} itemTemplate={itemTemplate} numVisible={3} numScroll={1}></Carousel>

Responsive

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={products} itemTemplate={itemTemplate} numVisible={3} numScroll={1} responsiveOptions={responsiveOptions}></Carousel>

const responsiveOptions = [
    {
        breakpoint: '1024px',
        numVisible: 3,
        numScroll: 3
    },
    {
        breakpoint: '768px',
        numVisible: 2,
        numScroll: 2
    },
    {
        breakpoint: '560px',
        numVisible: 1,
        numScroll: 1
    }
];

Header and Footer

Custom content projection is available using the header and footer properties.

<Carousel value={products} itemTemplate={itemTemplate} header={<h1>Header</h1>}></Carousel>

Orientation

Default layout of the Carousel is horizontal, other possible option is the vertical mode that is configured with the orientation property.

<Carousel value={products} itemTemplate={itemTemplate} orientation="vertical"></Carousel>

AutoPlay and Circular

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.

Controlled vs Uncontrolled

In controlled mode, page and onPageChange properties need to be defined to control the first visible item.

<Carousel value={products} itemTemplate={itemTemplate} page={page} onPageChange={(e) => setPage(e.page)}></Carousel>

Uncontrolled

In uncontrolled mode, no additional properties are required. Initial page can be provided using the page property in uncontrolled mode however it is evaluated at initial rendering and ignored in further updates. If you programmatically need to update the first visible item index, prefer to use the component as controlled.

<Carousel value={products} itemTemplate={itemTemplate}></Carousel>

Theming

Carousel supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact Carousel showcase for demos and documentation.