[react-slick] 슬라이더(캐러셀) 구현

화면 예시

react-slick 설치

npm install react-slick
npm install lick-carousel # css import 위함

import

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

기본 사용법

  var settings = {
    dots: true, //슬라이더 밑에 나오는 점들 표시
    infinite: true, //맨마지막 페이지에서 첫페이지로 돌아올 수 있게
    speed: 500, //슬라이더 넘기는 속도
    slidesToShow: 1, //한 화면에 보여줄 요소 개수
    slidesToScroll: 1 //스와이프를 시 넘길 요소 개수
    ...
  };

  return (
    <Slider {...settings}>
      <div>
        <h3>1</h3>
      </div>
      <div>
        <h3>2</h3>
      </div>
      <div>
        <h3>3</h3>
      </div>
      <div>
        <h3>4</h3>
      </div>
      <div>
        <h3>5</h3>
      </div>
      <div>
        <h3>6</h3>
      </div>
    </Slider>
  );

Slider 컴포넌트 안에 자식 컴포넌트를 렌더링하면 된다.
이때 settings를 정의하여 커스텀할 수 있는데, settings에 들어갈 내용은 아래 공식문서를 참고하자.
공식문서: https://react-slick.neostack.com/

내 react 코드

export const settings = {
  dots: true,
  infinite: true,
  slidesToShow: 3,
  swipeToSlide: true,
  speed: 300,
  nextArrow: <SampleNextArrow />,
  prevArrow: <SamplePrevArrow />,
};

function SampleNextArrow(props) {
  const { className, style, onClick } = props;
  return (
    <div
      className={className}
      style={{ ...style, display: "block" }}
      onClick={onClick}
    />
  );
}

function SamplePrevArrow(props) {
  const { className, style, onClick } = props;
  return (
    <div
      className={className}
      style={{ ...style, display: "block" }}
      onClick={onClick}
    />
  );
}

nextArrow와 prevArrow를 통해 화살표 컴포넌트를 직접 만들어서 넣어줄 수 있다.
일단 나는 기존의 스타일을 그대로 사용했다.

<SliderWrapper>
  <Slider {...settings}>
    {books.map((book, index) => (
      <BookCover
        key={index}
        bookId={book.bookId}
        userName={book.userName}
        title={book.title}
        texts={book.texts}
        coverUrl={book.coverUrl}
        images={book.images}
      />
    ))}
  </Slider>
</SliderWrapper>

SliderWrapper 안에 Slider를 두었고, 그 안에서 BookCover 여러 개를 렌더링 했다.

개발자 도구를 통해 className 알아내기

개발자 도구를 열어보면 최상위 컴포넌트인 class="slick-slider slick-initialized부터 시작해서 각 요소들의 className을 알아낼 수 있다.
이렇게 알아낸 className을 통해서 css 스타일링을 해보자.

styled-components 코드

const SliderWrapper = styled.div`
  width: 1000px;
  padding: 30px;
  box-sizing: border-box;
  position: relative;
  .slick-initialized{ //슬라이더 최상위 컴포넌트
    width: 100%;
  }
  .slick-track{ //모든 자식 요소를 담고 있는 가로로 기다란 트랙(숨겨진 부분 존재)
    height: 500px;
  }
  .slick-slide{ //각 요소들
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    .book-cover{ //내가 직접 넣어서 렌더링해준 BookCover 컴포넌트
      width: 230px;
    }
  }
  .slick-current + .slick-active{ //현재 보여지는 가장 왼쪽 요소의 다음 요소
    .book-cover{
      width: 300px; //가운데 요소의 크기만 좀더 크게 설정
    }
  }
  .slick-dots {
    .slick-active {
      button::before {
        color: white;//선택된 점의 색상 설정
      }
    }
    button::before {
      color: #e9e9e9;//선택 안된 점의 색상 설정
    }
  }
`;

참고: https://bum-developer.tistory.com/entry/NPM-react-slick