[리액트] react-slick 캐러셀

💡 react-slick은 캐러셀을 간단히 구현하게 해주는 라이브러리다.

무한 캐러셀, 표시 점, 버튼 등등 다양한 옵션을 선택하여 캐러셀 구현 시간을 상당히 줄여준다.

설치

---

$ npm install react-slick --save // 라이브러리 설치
$ npm install slick-carousel --save // css 설치

사용하기

---

react-slick 사이트에서 slick 사용 방법과 다양한 캐러셀, 샘플 코드가 있다.

아래는 그중 가장 기본이 되는 SimpleSlider 이다.

라이브러리와 Css를 모두 다운 받았다면 이제 캐러셀을 구현할 컴포넌트에서 3가지를 import한다.

아래의 샘플 코드에 css 속성을 부여해서 사용하면 된다.

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

 const SimpleSlider {
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };
    return (
      <div>
        <h2> Single Item</h2>
        <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>
      </div>
    );
  }
export default SimpleSlider

여기서 주목할 부분은 settings다. settings의 다양한 옵션으로 많은 기능들을 간단하게 구현할 수 있다.

settings 옵션

---

옵션	기능	옵션	기능
dots	개수 표시 점	draggable	드래그
infinite	무한 캐러셀	fade	사라졌다 나타나는 효과
speed	다음 컨텐츠 까지의 속도	arrows	좌,우 버튼
slidesToShow	화면에 보이는 컨텐츠 수	vertical	세로 캐러셀
slidesToScroll	스크롤 시 넘어가는 컨텐츠 수	initialSlide	첫 컨텐츠 번호
centerMode	현재 컨텐츠 가운데 정렬	pauseOnFocus	focus시 정지
centerPadding	중앙 컨텐츠 padding 값	pauseOnHover	hover시 정지
autoplay	자동 캐러셀	responsive	화면 넓이에 따른 옵션
autoplaySpeed	자동 캐러셀 속도	breakpoint	(숫자)px 이하일 경

const settings = {
  dots: true, // 개수 표시 점
  infinite: true, // 무한 캐러셀
  speed: 500, // 다음 컨텐츠 까지의 속도
  slidesToShow: 3, // 화면에 보이는 컨텐츠 수
  slidesToScroll: 1, // 스크롤 시 넘어가는 컨텐츠 수
  centerMode: true, // 현재 컨텐츠 가운데 정렬
  centerPadding: '10px', // 중앙 컨텐츠 padding 값
  autoplay: true, // 자동 캐러셀
  autoplaySpeed: 2000, // 자동 캐러셀 속도
  draggable: false // 드래그      
  fade: false, // 사라졌다 나타나는 효과
  arrows: true, // 좌,우 버튼
  vertical: false, // 세로 캐러셀
  initialSlide: 1, // 첫 컨텐츠 번호
  pauseOnFocus: true, // focus시 정지
  pauseOnHover: true, // hover시 정지
  responsive: [ // 반응형 옵션 
	{
  		breakpoint: 480, // (숫자)px 이하일 경우
        settings: {
          slidesToShow: 1,
          arrows:true,
		}
	}
  ]
};

Slick 사이트에서 잘 활용한 옵션들을 확인해도 좋을거 같다.

마치며

JS, React로 밖에 캐러셀을 만든 적이 없는데 이번에 또 캐러셀을 만들 기회가 생겨서 라이브러리를 꼭 써보고 싶었다.
처음에 조금 해메긴 했지만 그에 반해 정말 빠르게 다양한 기능들로 만들어서 라이브러리의 소중함을 몸으로 느낄 수 있었다.