react-slick(이미지 슬라이드)

npm 사이트

https://www.npmjs.com/package/react-slick

react-slick

react-slick의 npm 주소이다.

react-slick이란?

인스타 같은 곳에서 사진이 여러장 있으면 사진을 슬라이드 형태로 넘길 수 있게 해주는 라이브러리이다.

사용법

  const [currentSlide, setCurrentSlide] = useState(0);

현재 슬라이드가 몇번째 사진인지 저장하는 state이다.

  <Slick
    // 이미지을 0번째부터
    initialSlide={0}
    // 다음으로 넘기기 위해서 현재 slide를 state로 저장해야됨
    afterChange={(slide) => setCurrentSlide(slide)}
    // 무한으로 넘겨짐
    infinite
    // 화살표가 사라져서 마우스로 밀어야 넘겨짐
    arrows={false}
    // 한번에 하나씩만 보이게
    slidesToShow={1}
    // 한번에 하나씩만 넘겨지게
    slidesToScroll={1}
  >
    {images.map((v) => (
      <ImgWrapper key={v.src}>
        <img src={v.src} alt={v.src} />
      </ImgWrapper>
    ))}
  </Slick>

Slick을 속성과 함께 같이 넣어줘야 한다.  각 속성에 대한 주석을 위에 달아놨다. 하지만 더 많은 속성이 있으니까 npm 사이트나 공식문서에 가서 찾아보면 좋을 것 같다.

 

이런식으로 스타일링도 해줄 수 있다. 옆으로 넘기면 다음 사진을 볼 수 있다.