React Slick Carousel(Slider) 라이브러리 사용 가이드
KUKJIN LEE • 1개월 전 작성
React 애플리케이션에서 슬라이더나 캐러셀 기능을 구현하려면 손쉽게 사용할 수 있는 오픈 소스 라이브러리 중 하나가 React Slick입니다.
React Slick 설치 방법
npm i react-slick
※ TypeScript 사용자라면 아래 Type까지 설치하시면 됩니다.
npm install --save @types/react-slick
사용법
간단합니다. 아래와 같이 Slider
를 react-slick
에서 가져와 간단한 settings 코드만 작성하면 쉽게 구현할 수 있습니다.
Settings
다양한 설정 옵션을 통해 사용자 정의가 가능합니다.
-
dots:
true
로 설정하면 슬라이더 하단에 네비게이션 점(dots)이 표시됩니다. -
infinite:
true
로 설정하면 무한 반복 슬라이더가 됩니다. -
speed: 슬라이드 전환 속도를 밀리초 단위로 설정합니다.
-
slidesToShow: 한 번에 표시할 슬라이드 수를 설정합니다.
-
slidesToScroll: 한 번에 스크롤할 슬라이드 수를 설정합니다.
-
autoplay: 자동으로 슬라이드가 전환되도록 합니다.
import React from "react";
import Slider from "react-slick";
export default function SimpleSlider() {
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>
);
}
기본 설정 뿐 아니라 커스텀 가능합니다.
기본적인 느낌의 버튼을 제공하지만, 커스텀 버튼을 사용할 수 있습니다.
nextArrow와 prevArrow를 설정하여 커스텀 컴포넌트를 사용할 수 있습니다.
const SampleNextArrow = (props) => {
const { className, style, onClick } = props;
return (
<div
className={className}
style={{ ...style, display: "block", background: "red" }}
onClick={onClick}
/>
);
};
const settings = {
nextArrow: <SampleNextArrow />,
prevArrow: <SamplePrevArrow />,
};