Getting Started

Get started in your project.

Or try Acrool React Carousel with CodeSandbox.

What you'll need

• Node.js version 14 or above:
• React.js version 18-19 or above:

Installation

yarn add @acrool/react-carousel

You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.

Start your project

Add the required style files to your project entry point

/src/App.tsx

import '@acrool/react-carousel/dist/index.css';

Then use code

import AcroolCarousel, {TAcroolSlideItemDataList, AcroolSlideCard} from '@acrool/react-carousel';

const images = [
    {id: 1, color: 'green'},
    {id: 2, color: 'blue'},
    {id: 3, color: 'gray'},
    {id: 4, color: 'white'},
    {id: 5, color: 'black'},
    {id: 6, color: 'yellow'},
    {id: 7, color: 'purple'},
    {id: 8, color: 'red'},
];

export const CustomBanner = () => {
    const acroolSlideItemData: TAcroolSlideItemDataList = images.map(row => {
        return <AcroolSlideCard key={row.id}>
            <div style={{height: '100%', backgroundColor: row.color}}/>
        </AcroolSlideCard>
    });
    return <AcroolCarousel
        data={acroolSlideItemData}
        height="250px"
        isEnableNavButton
        isEnablePagination
        isDebug
    />
}

Then seeing this means you succeeded