[React] react-slick 사용기

시작에 앞서.. 라이브러리 없이 순수 리엑트로 슬라이더를 구현해보았는데 왜 라이브러리를 쓰는지 알게된 경험이였다 ㅎ..

설치

참고 url :https://react-slick.neostack.com/docs/get-started

1.npm 으로 설치 (or yarn)

npm install react-slick --save

npm install slick-carousel --save

설치후 import 해준다.

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

사용

 const settings = {
      slidesToShow: 3,
      slidesToScroll: 1, 
      centerMode: true,
      centerPadding: '0px',
      arrows: true,
      autoplay: true,
      autoplaySpeed: 2000,
      dots: true,
      fade: false,
      infinite: true,
      pauseOnFocus: true,
      pauseOnHover: true,
      speed: 500,
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2,
          }
        },
        {
          breakpoint: 320,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    };

내가 사용한 슬라이더 setting (옵션) 값이다.

옵션들이 아주 많아서 편하게 사용이 가능하다. 몇개 정리해보자면,

Parameter	Type	default	기능
dots	boolean	false	dot 모양의 paper
infinite	bollean	true	무한 스와이프
slidesToShow	number	1	한 화면에 보이는 슬라이드 개수
variableWidth	boolean	false	각 슬라이드 넓이에 맞게 슬라이드 영역내 보이는 슬라이드 수 자동 설정
centerMode	boolean	false	각 슬라이드 넓이에 맞게 슬라이드가 들어오는 경우, 활성화된 슬라이드 가운데 배치
slidesToScroll	number	1	슬라이드 실행할때, 한번에 슬라이드 되는 개수
speen	number	300	슬라이드 속도
autoplay	boolean	false	자동 슬라이드
autoplaySpeed	number	3000	자동 슬라이드시, 한 슬라이드에 머무르는 시간
resposive	object	-	반응형 슬라이드 : 화면넓이에 따라 레이아웃 변경(위의 코드 참고)
asNavFor	string	-	"슬라이드 + 썸네일 슬라이드" 형의 슬라이드 구현