[React] Slick 라이브러리 사용하기

캐러셀을 구현하기 위해 라이브러리를 써봤다.

우선, 내가 구현한 화면은 이렇게 생김

공식문서에 보면 어떻게 사용하는지 나와있다.

우선 설치부터 해보자.

설치하기

1) react-slick install 하기

npm install react-slick --save

2) 사용하고자 하는 파일에서 import 하기

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

슬라이더 실행, 커스텀하기

slick은 전체적인 커스텀하기 위해서는 setting을 건드린다.

const settings = {
  arrows: true, // 양 끝 화살표 생성여부
  dots: true, // 슬라이더 아래에 슬라이드 개수를 점 형태로 표시
  infinite: true, // 슬라이드가 맨 끝에 도달했을 때 처음 슬라이드를 보여줄지 여부
  slidesToShow: 3, // 화면에 한번에 표시할 슬라이드 개수 설정
  slidesToScroll: 1, // 옆으로 스크롤할 때 보여줄 슬라이드 수 설정
  speed: 500, // 슬라이드 넘길 때 속도
  autoplay: true, // 슬라이드를 자동으로 넘길지 여부
  autoplaySpeed: 3000, // 자동으로 넘길 시 시간 간격
}

slick은 그래도 다른 라이브러리에 비해 커스텀하기 조금 쉬웠던 것 같다.

그리고 css 적인 요소를 건들이기 위해서
node_modules의 slick에서 className을 찾아서 직접 스타일링 했다.

아래는 내가 직접 스타일링한 코드다.

 <AllSlide>
      <Slider {...settings}>
        {slideDatas.map(slidedata => {
          return (
            <Set key={slidedata.id} onClick={() => goToArticle(slidedata.id)}>
              <SlideText>
                <TextTitle>{slidedata.title}</TextTitle>
                <TextWriter>by. {slidedata.authors}</TextWriter>
              </SlideText>
              <SingleSlide
                src={slidedata.header_image}
                alt={`${slidedata.title}의 대표 이미지`}
              />
            </Set>
          );
        })}
      </Slider>
  </AllSlide>


const settings = {
  className: 'slider variable-width',
  dots: true,
  arrows: true,
  infinite: true,
  speed: 900,
  centerMode: true,
  slidesToShow: 1,
  slidesToScroll: 2,
  variableWidth: true,
  autoplay: true,
  autoplaySpeed: 3000,
  pauseOnHover: true,
};

const AllSlide = styled.div`
  height: 450px;
  margin: 50px 0;

  .slick-prev:hover:before,
  .slick-prev:focus:before,
  .slick-next:hover:before,
  .slick-next:focus:before {
    opacity: 0.5;
  }

  .slick-prev:before,
  .slick-next:before {
    height: 0;
    font-size: 70px;
    color: white;
    opacity: 0.3;
  }

  .slick-prev {
    left: 10px;
    z-index: 10;
  }
  [dir='rtl'] .slick-prev {
    right: -25px;
    left: auto;
  }

  .slick-next {
    right: 70px;
  }
  [dir='rtl'] .slick-next {
    right: auto;
    left: -25px;
  }

  .slick-dots {
    bottom: -50px;
  }

  .slick-dots li {
    margin: -20px 15px;
  }

  .slick-dots li button:before {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: gray;
    text-align: center;
    content: '';
  }

  .slick-dots li.slick-active button:before {
    opacity: 0.75;
    color: black;
  }
`;

Styled-Components 의 경우 className에 css를 주는 것을 지양해야 한다.

그러나 라이브러리의 경우는 라이브러리 자체를 styled-components로 감싸서 스타일링을 해준다. className 또한 react-slick이 제공해주는 클래스들이기 때문에 사용할 수 있다. (nesting 해서 사용!)

className은 개발자도구로 찾아보면 편하다.