在 NextJS 中使用

快速一分鐘了解怎麼在 Nextjs 中使用 Bear React Carousel

開始使用

或是在 CodeSandbox 中測試 NextJS 使用 Bear React Carousel

或從 GitHub

更改 ModuleResolution

npx 建立預設為 bundler

tsconfig.json

{
    "moduleResolution": "node"
}

新增元件

新增一個輪播元件

/src/components/MyCarousel

'use client'

import BearCarousel, {BearSlideCard, IBearSlideItemData} from 'bear-react-carousel';
import "bear-react-carousel/dist/index.css";

const MyCarousel = () => {
    const images = [
        { id: 1, imageUrl: "https://dummyimage.com/900x400/dee2e6/6c757d.jpg" },
        { id: 2, imageUrl: "https://dummyimage.com/900x400/dee2e6/6c757d.jpg" },
        { id: 3, imageUrl: "https://dummyimage.com/900x400/dee2e6/6c757d.jpg" },
    ];

    const bearSlideItemData: IBearSlideItemData[] = images.map((row) => {
        return <BearSlideCard
            key={row.id}
            bgSize="100%"
            bgUrl={row.imageUrl}
        />;
    });

    return <BearCarousel data={bearSlideItemData} height="400px" />;
}

export default MyCarousel;

開始使用

加入到你的頁面中

src/app/page

import styles from './page.module.css'
import MyCarousel from '@/components/MyCarousel';

export default function Home() {
  return (
    <main className={styles.main}>
      Bear React Carousel + NextJS
      <MyCarousel/>
    </main>
  )
}

到這裡就完成了