Carousel: 회전목마

세팅하기

npm install react-slick
npm install slick-carousel -D // react-slick style import

적용하기

import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css?after';

interface IProps {
  image: string[];
}
function Slide({image}: IProps) {
  const [choose, setChoose] = useState<string>();
  const imgCopy = image;

  // react-slick 옵션 설정
  const settings = {
    arrows: false, // 슬라이드를 할 화살표를 나타낼 것인가?
    dots: true, // 밑에 점을 클릭하여 슬라이드 할 것인가?
    infinite: true, // 마지막으로 갔을 시 처음으로 돌아옴
    speed: 500, // 넘어가는 속도
    slidesToShow: 1, // 한 화면에 보이는 콘텐츠 개수
    slidesToScroll: 1, // 한 번에 넘어가는 콘텐츠 개수
    afterChange: (cur: number) => { // 넘어갔을 때 이벤트 등록 가능
      setChoose(imgCopy[cur]);
    },
  };

  return (
    <Slider {...settings}>
      {imgCopy.map((img) => (
        <Image src={img} w="300px" h="200px" borderRadius="4px" />
      ))}
    </Slider>
  );
}

export default Slide;

커스텀을 하려면 개발자 도구에서 클래스 이름을 보고 css 바꾸기