react-slick 이용해 캐로셀 구현하기

react-slick 이용해 캐로셀 구현

react-slick를 이용해 캐로셀을 구현해봤습니다.
yarn add react-slick

스타일링

import styled, { createGlobalStyle } from "styled-components";

1️⃣const Global = createGlobalStyle`
  .slick-slide {
    display: inline-block;
  }
`;

const SlickWrapper = styled.div`
  height: calc(100% - 44px);
  background: #090909;
`;

const Indicator = styled.div`
  text-align: center;

  & > div {
    width: 75px;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    background: #313131;
    display: inline-block;
    text-align: center;
    color: white;
    font-size: 15px;
  }
`;

1. react-slick의 기본 클래스인 slick-slide을 지정해 줍니다. styled-components를 사용하면 임의로 클래스 이름을 정의하기 때문에 지정된 이름으로 스타일을 하기 위해 createGlobalStyle을 이용해 Global 컴포넌트로 생성합니다. 이 Global 컴포넌트는 해당 컴포넌트 아무 곳이나 선언하면 됩니다.

컴포넌트

const ImagesZoom = ({ images, onClose }) => {
  1️⃣const [currentSlide, setCurrentSlide] = useState(0);

  return (
    <SlickWrapper>
      <div>
        <Slick
          2️⃣initialSlide={0} // 초기 인덱스
          3️⃣beforeChange={(slide, newSlide) => setCurrentSlide(newSlide)} // 슬라이드 인덱스를 이용해
          4️⃣infinite // 무한이 반복
          5️⃣arrows={false} // 화살 없애기
          6️⃣slidesToShow={1} // 하나씩 보여주기
          7️⃣slidesToScroll={1} // 하나씩 스크롤 하기
        >
          8️⃣{images.map((image) => (
            <ImgWrapper key={image.src}>
              <img src={image.src} alt={image.src} />
            </ImgWrapper>
          ))}
        </Slick>
        // 밑에 몇번째 이미지인지 보여주기 위해
        9️⃣<Indicator>
          <div>
            {currentSlide + 1} /{images.length}
          </div>
        </Indicator>
      </div>
    </SlickWrapper>
  );
};

1. slice의 초기 인덱스를 지정, 다음 인덱스를 설정합니다.
2. 초기에 보여줄 인덱스 설정.
3. 슬라이스가 움직이는 로직입니다. beforeChange로 밑에 있는 Indicator을 매끄럽게 구현합니다. 필요 없다면 afterChange 속성을 사용해도 됩니다.
4. 마지막 슬라이드에서 처음 슬라이드로 움직이게 하는 설정입니다.
5. 캐러셀의 화살표를 없앱니다. 설정한다면 화살표로 이동, 없앤다면 드래그로 이동이 가능합니다.
6. 몇 개씩 보여줄지 결정합니다.
7. 몇 개씩 넘길지 보여줍니다.
8. 현재 이미지의 인덱스를 보여줍니다.