리액트에서 슬라이드 기능(캐러셀) 을 만들기 위해 react-slick 라이브러리를 사용했습니다. 라이브러리는 기본 세팅된 모양만 가져다 쓰기에는 간편하지만, 요소 하나하나를 커스텀한다면 경우에 따라 더 복잡할 수 있습니다. (개인적인 의견) 간단한 사용법과 커스텀 방법을 아래 소개합니다.
아래 명령어로 설치하고, 작업할 폴더에 css 파일을 import 합니다.
npm install react-slick --save
npm install slick-carousel --save // 안하면 아래 css import 안됨
// 작업할 파일 에서
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
스타일드 컨포넌트를 사용한다면 아래와 같은 형태로 써볼 수 있고, 각 속성값(아래 settings 에 해당하는)은 slick 공식 문서에 가시면 다양한 예시를 볼 수 있습니다. 아래는 Slider 컴포넌트에 스타일을 주기 위해 한번 더 감싼 상태입니다. 감싸지 않고 Slider 만 써주어도 됩니다.
const MainSlider = () => {
const settings = {
dots: true,
fade: true,
infinite: true,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
};
return (
<StyledSlider {...settings}> // 위에 세팅한 속성 적용
<SliderItem /> // 넘기면서 보여울 여러 장 이미지, 맵으로 생성
</StyledSlider>
);
};
export default MainSlider;
const StyledSlider = styled(Slider)` // Slider 컴포넌트를 꾸며주는 스타일드 컴포넌트 생성
[스타일 변경]
`;
좌우 화살표나 하단 닷의 위치나 색상을 바꾸고 싶다면 아래 생성한 스타일 컴포넌트에 작성합니다. 라이브러리는 기본으로 적용된 CSS 가 있기 때문에 해당 요소의 태그나 클래스명을 찾아서 하나하나 바꾸어 주어야합니다. 처음에 import 한 slick.css 와 slick-theme.css 파일을 열어서 확인해보세요.
아래는 예시 이미지와 css 수정 코드입니다.
const StyledSlider = styled(Slider)`
.slick-prev {
z-index: 1;
left: 30px;
}
.slick-next {
right: 40px;
}
.slick-prev:before,
.slick-next:before {
font-size: 30px;
opacity: 0.5;
color: white;
}
.slick-dots {
display: flex;
justify-content: center;
bottom: 30px;
color: white;
li button:before {
color: white;
}
li.slick-active button:before {
color: white;
}
}
`;