Getting Started

Get started in your project.

Or try Bear React Carousel with CodeSandbox.

What you'll need

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

Installation

yarn add bear-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 'bear-react-carousel/dist/index.css';

Then use code

import BearCarousel, {TBearSlideItemDataList, BearSlideCard} from 'bear-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 bearSlideItemData: TBearSlideItemDataList = images.map(row => {
        return {
            key: row.id,
            children: <BearSlideCard>
                <div style={{height: '100%', backgroundColor: row.color}}/>
            </BearSlideCard>
        };
    });
    return <BearCarousel
        data={bearSlideItemData} 
        height="250px"
        isEnableNavButton
        isEnablePagination
        isDebug
    />
}

Then seeing this means you succeeded