在 NextJS 中使用

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

開始使用

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

或從 GitHub

更改 ModuleResolution

npx 建立預設為 bundler

tsconfig.json

{
    "moduleResolution": "node"
}

新增元件

新增一個輪播元件

/src/components/MyCarousel

'use client'

import AcroolCarousel, {AcroolSlideCard, IAcroolSlideItemData} from '@acrool/react-carousel';
import '@acrool/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 acroolSlideItemData: IAcroolSlideItemData[] = images.map((row) => {
        return <AcroolSlideCard
            key={row.id}
            bgSize="100%"
            bgUrl={row.imageUrl}
        />;
    });

    return <AcroolCarousel data={acroolSlideItemData} 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}>
      Acrool React Carousel + NextJS
      <MyCarousel/>
    </main>
  )
}

到這裡就完成了