[TIL] React-Slick

🍠 React-Slick

---

📝 React-Slick 이란?

React에서 슬라이드를 쉽게 구현할 수 있도록 도와주는 라이브러리이다.

📝 React-Slick 설치

npm install react-slick slick-carousel ⇒ slick-carousel은 CSS 커스텀하기위해 필요!

typescript를 사용하는 경우 아래와 같이 작성해야한다.
npm install react-slick @types/react-slick slick-carousel

📝 React-Slick 적용

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

const ImageSlider = () => {
  //옵션
  const settings = {
    arrows: true, //슬라이드 양 옆 화살표 (true/false)
    dots: true, //슬라이드 아래 점점점 표시 (true/false)
    infinite: true, //슬라이드 반복 여부 (true/false)
    slidesToShow: 1, //한 번에 볼 수 있는 슬라이드 개수
    slidesToScroll: 1, //한 번에 넘어가는 슬라이드 개수
  };

  return (
    <Slider {...settings}>
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </Slider>
  );
};

arrow 스타일 수정은
1. CSS에서 .slick-prev, .slick-next 클래스명으로 접근하여 수정하거나
2. 옵션에서 nextArrow, prevArrow를 원하는 아이콘으로 수정할 수 있다.

(+ dot 스타일 수정 : .slick-dots 클래스명에 접근하여 수정가능)


CSS까지 적용하면 아래와 같이 슬라이드가 잘 적용된걸 볼 수 있다!

참고
https://fromnowwon.tistory.com/entry/react-slick-slider
https://velog.io/@juno7803