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 />,
};