React Slick 이용 캐러셀 구현 및 커스터마이징 하기

캐러셀은 모두 알고 있을 것이다. 회전목마 처럼 주로 이미지 등을 회전시키면서 사이트의 전체적인 분위기를 좀더 동적으로 보여질 수 있게 해주는 방법인데 직접 구현할 수도 있겠지만 react-slick 라이브러리를  이용해서 간단히 구현하는 법과 커스터마이징 하는 방법까지 알아보자! 원래 bootstrap, material-ui 등 프론트 라이브러리나 프레임워크를 다룰 때 나처럼 초심자나 익숙하지 않은 사람은 본인이 원하는 대로 커스터마이징 하기가 쉽지 않을 것이다. 

 

1. 우선 당연히 라이브러리를 설치해준다. 

 

npm install react-slick --save

npm install slick-carousel --save

 yarn이 깔려있다면 yarn add react-slick, yarn add slick-carousel 로 깔아주면 되겠다. 

 

2. 본인이 쓸 컴포넌트 파일에 CSS파일을 임포트 해준다

 

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

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

 

 

3. 아래 코드 붙여넣기

import React, { Component } from "react";
import Slider from "react-slick";

export default class SimpleSlider extends Component {
  render() {
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };
    return (
      <div>
        <h2> Single Item</h2>
        <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>
      </div>
    );
  }
}

 

아래처럼 캐러샐이 잘 작동하겠다. 

 

본인 입맛대로 사진을 넣어서 캐러셀을 마무리 해주면 되겠지만..!! 난 처음에 내가 기존에 짜둿던 페이지의 너비, 높이라던지 스타일링이 달라서 그런지 좌우 버튼과 아래 점 표시 (dots) 가 안보이거나 이상한 위치에 가있었다. 

 

 

첫번째 기본 커스터 마이징 방법!

 

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

기본 라이브러리에서 지정해놓은 값들을 바꾸면서 보이게 하거나 자동재생을 시키거나 등을 정할 수 있다. 

 

두번째 커스터 마이징 방법!

 

본인은 기능들을 보이게 하고 안보이게 하는 것 보다 마음대로 위치를 바꾸고 싶었다. 하지만 위의 방법은 지정해놓은 객체내의 값들만 바꿀 수 있기 때문에 내가 원하는 기능은 이행하지 못했다. 

 

 

개발자 도구를 킨뒤 엘리멘트를 찾아주면 만들어진 라이브러리의 클래스명을 알 수 있다.

 

그 뒤에 node-modules 폴더 안에 slick-carousel 폴더 안에 slick 폴더 안에서 우리가 임포트 해줬던 두 css 파일이 있을 것이다. 

저 클래스명은 좌우 넘기기 버튼인데 본인이 원하는 만큼 위치를 옮기거나 크기를 키워주는등 기능적인 부분의 커스터마이징보단 좀 더 세세한 스타일링이 가능한 방법을 소개했다.