開始使用

在 你的專案中 開始使用

或是在 CodeSandbox 試試看 Bear Carousel

你需要什麼環境

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

安裝

yarn add bear-react-carousel

您可以在命令提示符、Powershell、終端或代碼編輯器的任何其他集成終端中鍵入此命令

在你的專案中使用

將所需的樣式文件添加到項目入口點

/src/App.tsx

import 'bear-react-carousel/dist/index.css';

然後使用他

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
    />
}

然後看到這個就代表你成功了