React Slick 캐러셀 라이브러리 적용하기

웹에서 광고를 보여줄 때 캐러셀 ui를 많이 사용한다. 대부분의 이커머스 사이트에서 사용하고 있고, 학교 홈페이지 메인 화면에서도 흔히 볼 수 있다.

자주 사용되는 ui인데 바닐라 자바스크립트로 구현도 할 수 있다고 하는데, 이번에는 library를 사용해서 구현했다.

라이브러리를 선택할 때 이 글 을 추천받아 참고했는데, 여기서 언급된 라이브러리는 아래와 같다.

• Embla Carousel
• Slick
• Swiper
• Flickity
• Keen-Slider

둘러보다가 처음에는 Embla Carousel 을 사용해봤는데, 커스터마이징하기 좀 불편해서 많이 쓴다고 하는 Slick 을 적용해봤다.

React에서 쓸 수 있게 되어있는 React Slick(링크 참조) 을 사용했다.

링크의 문서에 따르면 아래과 같이 설치한 후에(npm 기준),

npm install react-slick --save
npm install slick-carousel --save

css를 import하고,

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

다음과 같이 사용할 속성을 settings에 넣어주면 된다.

const settings = {
  dots: true,
  infinite: true,
  speed: 500,
  autoplay: true,
  autoplaySpeed: 3000,  
  slidesToShow: 1,
  slidesToScroll: 1,
  centerMode: true,
  centerPadding: "20px"
};

점 ui, 무한 스와이프, 넘어가는 속도, 자동 재생, 자동 재생 시간, 한 번에 보여줄 슬라이드 개수 등의 속성을 지정해줄 수 있다.

무한 스와이프, 자동재생, 점 등 캐러셀을 구현할 때 흔히 사용하려고 하는 스펙은 거의 다 들어있다.

현재 보여주는 슬라이드의 양쪽에 앞뒤의 슬라이드를 보여주고 싶다면 centerMode와 centerPadding을 주면 된다.

다양한 속성을 제공하고 있는데 다음 문서 에서 확인할 수 있다.

마지막으로 아래와 같이 컴포넌트를 사용하면 된다.

<Slider {...settings}>
    // ...
</Slider>

캐러셀 구현에 많이 사용되는 라이브러리라고 해서 써봤는데 기본적으로 제공하는 속성도 다양하고, 문서도 잘 되어있고, 커스터마이징하기도 편해서 좋았다.