Carousel 만들기 (React-Slick)

 

목차

Carousel이란

사전적 의미로는 회전목마로써

웹에서

 

이런 콘텐츠를 뜻한다.

 

회전하면서 콘텐츠를 보여주는 모습이

회전목마를 닮아 Carousel이라 부른다.

React-Slick

라이브러리는 여러가지 있겠지만

이게 제일 깔끔하고 대중적인 것 같아 이걸 선택했다.

Neostack

 

대략 이런느낌인데,

setting과 css 수정으로 자유도가 높다는 게

마음에 들었다.

(setting에서 화면에 나열되는 콘텐츠 개수도 정할 수 있다)

 

설치방법

npm

npm install react-slick

yarn

yarn add react-slick

 

다운로드를 했을 때

이 문장이 중요하다.

다운로드 성공했다는 뜻이니깐!

 

ccs를 포함한 기본 파일 다운로드

npm install slick-carousel

 

이 또한, 이 문장이 떴는지 확인하자.

 

import slick

이후 위에서 링크한 사이트에서 설명해준 샘플 코드를 가져와보자

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>
    );
  }
}

 

일단 샘플 파일에선 css를 import 안 해줬기 때문에

slick-carousel을 뺀 react-slick 그 자체로 샘플을 내놓았다.

당연하지만 반응형도 아니다.

손볼게 많겠구망...

 

import slick-theme

여기서 아까 우리가 다운로드하였던 커스터마이징 파일을 import 해보자.

코드로는

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

를 추가해 주면 된다.

이제 구색이 좀 갖추어졌다.

 

slick 커스터마이징

component 내 커스터마이징

일단 component 내의 setting에 대해 짚고 가자.

dots

carousel 밑에 지정 콘텐츠로 바로 이동할 수 있는 버튼을 뜻한다.

flase 할시 사라진다.

 

infinite 

콘텐츠 끝까지 갔을 때 다음 콘텐츠를 처음 콘텐츠로 가져와 반복한다.

 

speed

콘텐츠를 넘어갈 때 속도이다.

단위 (ms)이다. 1000ms = 1s

 

slidesToShow

한 화면에 보이는 콘텐츠 개수를 말한다.

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

 

slidesToScroll

한 번에 넘어가는 콘텐츠 수이다.

2로 정하면 2개씩 넘어간다.

 

Style 커스터마이징

수정을 하려면 파일을 가져와야 하니 파일 위치도 알아보자.

프로젝트 폴더 젤 위의 node_modules 폴더 안에

 

slick-carousel 폴더 안에

slick 폴더 안에

slick.css,

slick-theme.css를 찾아주자.

(선택)스타일 파일 위치 수정

이를 복사해서 node_modules 안이 아닌 다른 폴더에 붙여 넣어주자

node_modules 안에 있는 폴더 그대로 할 경우에는

수정사항이 새로 빌드할 때에만 적용된다.

(내가 답답해서 그런 거라 개인적인 선택사항이다.

이렇게 안 할 시 빌드를 중지하고, 다시 시작해야 한다.)

import React from "react";
import Slider from "react-slick";
import './slickStyle.css';
import './slick-theme.css';

import 경로도 변경해주자.

 

위치를 변경해주면 에러가 생기는데,

slick-theme 파일의

/* Slider */
.slick-loading .slick-list
{
    background: #fff url('./ajax-loader.gif') center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('./fonts/slick.eot');
    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}

제일 위에 이 코드에서

로딩할 때 gif,

폰트 파일을 상대 경로로 찾을 수 없기 때문이다.

 

그런데 로딩 gif도 안 쓸 거고,

폰트도 알아서 지정해줄 거라 상관없어 제외했다.

 

저기능을 쓰고 싶다면

css파일을 nodemodule 꺼로 import 하자.

 

스타일 하기

일단 현재 상태를 보기 쉽게

메인 페이지에 배경색을 주면

<div className="App" style={{
      backgroundColor: '#ccf2f4',
      height: '100vh',
    }}>

이렇게 slick 콘텐츠 자체에는

배경색이 없다는 것을 알 수 있다.

 

Slider 커스터마이징

slickStyle.css에서 

제일 위에 코드인 .slick-slider에서 배경색을 추가할 수 있다.

.slick-slider
{
    background: greenyellow;
    position: relative;

    display: block;
    box-sizing: border-box;
    

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

 

 

버튼 커스터마이징

slick-theme.css에서

.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 40px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: yellow;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: red;
}

위에 dots는 기본적인(누르지 않은) 버튼 커스터마이징이고

밑의 slick-active는 버튼을 눌렀을 때 설정 변경을 뜻한다.

알아둬야 할게 저게 버튼처럼 보이는데

버튼이 아니라 특수문자 •이다.

그래서 사이즈를 키우고 싶다면 font-size 값을 늘려야 한다.

 

끝

후... 편하려고 라이브러리를 들였는데, 더 힘들다....

그런데 원래 라이브러리가 그렇다.

간단하게 쓰기엔 편하고

세세하게 건들기에는 더 힘들다.

(생각해보니깐 블로그 포스팅하면서 하느라 힘들었는 것 같다.)

 

코딩을 하면서 자기 데이터를 쌓아가면

그것이 라이브러리가 될 것이다.

라이브러리의 시초가 그렇게 시작되었으니.

 

자기에게 딱 맞는 라이브러리라니

정말 좋을 것 같다.