보조기억장치
캐러셀(Carousel) 적용해보기 본문
캐러셀(Carousel)
이미지가 슬라이드 형식으로 자동으로 변경되는것
https://www.npmjs.com/package/react-responsive-carousel
react-responsive-carousel
React Responsive Carousel. Latest version: 3.2.23, last published: 2 years ago. Start using react-responsive-carousel in your project by running `npm i react-responsive-carousel`. There are 397 other projects in the npm registry using react-responsive-caro
www.npmjs.com
npm i react-responsive-carousel
import { Carousel } from "react-responsive-carousel";
import "react-responsive-carousel/lib/styles/carousel.min.css";
export default function CarouselComp() {
return (
<>
<div className="max-w-[1200px] mx-auto">
<Carousel
showArrows={true}
autoPlay={true}
interval={3000}
infiniteLoop={true}
showThumbs={false}
>
<div>
<img src="/images/banner/1.png" />
</div>
<div>
<img src="/images/banner/2.png" />
</div>
<div>
<img src="/images/banner/3.png" />
</div>
</Carousel>
</div>
</>
);
}
'React' 카테고리의 다른 글
| NextJS 13.4 Server Actions 사용 (0) | 2023.05.14 |
|---|---|
| Prisma 설치 (0) | 2023.05.12 |
| tailwind css Module not found (0) | 2023.05.06 |
| Next.js 13.4 (0) | 2023.05.06 |
| Next.js Error [TypeError]: Cannot read properties of undefined (reading 'map') (0) | 2023.05.04 |