Skip to main content

Start NextJS

Let's discover Bear Carousel in less than 1 minutes.

What you'll need​

Check Example​

Or try in NextJS with CodeSandbox.

Or with GitHub

Change ModuleResolution​

npx create default is bundler

tsconfig.json
{
    "moduleResolution": "node"
}

Create Component​

create carousel component

/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 {
            key: row.id,
            children: <BearSlideCard bgSize="100%" bgUrl={row.imageUrl} />
        };
    });

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

export default MyCarousel;

Getting Started​

add in your page

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

then is done!