[React] 리액트 캐러셀 라이브러리 react-slick 사용 해보기

메인페이지에 있는 캐러셀 컴포넌트를 만들게 되었다. 직접 만들까, 라이브러리를 사용할까 하다가 좋은 건 가져다 쓰라고 있는거니까... 하며 구글링 끝에 쉽게 캐러셀 컴포넌트를 만들 수 있는 라이브러리를 찾게 되었다!

react-slick이라는 이름의 라이브러리며, 사용법이 상당히 간단하며 종류도 다양하다. 나는 Lazy Load를 선택했다.

1. 설치

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

2. 원하는 캐러셀 고르기

https://react-slick.neostack.com/docs/example/lazy-load

Neostack

3. 적용하기

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

const CarouselWrapper = styled.div`
  width: calc(93%);
  height: calc(85%);
  margin: 0px 10px 0px 10px;

  .slick-prev::before,
  .slick-next::before {
    color: #9eb23b;
  }
`;

const Carousel = () => {
  const settings = {
    lazyLoad: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    initialSlide: 2,
    arrows: true
  };
  return (
    <CarouselWrapper>
      <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>
    </CarouselWrapper>
  );
};

export default Carousel;

나는 dots가 아닌 arrows가 뜨도록 설정해주었다. 다음과 같이 다양한 속성 프로퍼티가 있다고 한다. 커스텀하기 너무 좋을 것 같다!

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

그런데 아무리 봐도 화살표가 보이지 않았다. 화살표가 흰색이여서 안보이는 것 같았다. class를 찾아내 커스텀 해줘야 한다.

캐러셀을 감싸는 wrapper 컴포넌트에 아래와 같은 코드를 추가해줬더니

.slick-prev::before,
  .slick-next::before {
    color: #9eb23b;
  }

화살표가 잘 보인다!

이제 안에 내가 원하는 컴포넌트들을 배치해주면 될 것 같다.

 

참고한 블로그)

https://velog.io/@forest_xox/React-react-slick-%EC%BA%90%EB%9F%AC%EC%85%80

[리액트] react-slick 캐러셀

https://ryurim.tistory.com/110

[항해99 81일차] 2022.05.26 TIL (slick slider arrow 버튼 커스텀)