[TIL] 016. React - slick slide

✔ Install

npm install

npm install react-slick --save
npm install slick-carousel --save // CSS

slick slider를 react에서 사용하기위해 먼저 npm install을 해준다.

✔ Include

내장되어있는 css를 사용하기위해 index.html에서 cdn 주소를 받아오거나 js파일에서 import 해준다.

html

<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />

import

import "~slick-carousel/slick/slick.css"; 
import "~slick-carousel/slick/slick-theme.css";

✔ How to use

const settings = {
  dots: false,
  arrows: true,
  infinite: true,
  speed: 500,
  slidesToShow: 4,
  slidesToScroll: 1,
  autoplay: true,
};

내장되어있는 옵션을 객체 형태로 변수에 저장한다.

<Slider {...settings} className="slideWrap">
  <div>
    <img src="" al="slide image">
  </div>
  <div>
    <img src="" al="slide image">
  </div>
  <div>
    <img src="" al="slide image">
  </div>
</Slider>

slide item 바로 위 부모를 Slide 컴포넌트 형태로 감싸고
전개연산자({...settings})를 사용하여 전달한다.

참고

https://react-slick.neostack.com/