[NPM] react-slick

0. 들어가면서

웹사이트를 만들다 보면 필연적으로 만나는 기능 중 하나인 Slide!

요즘은 워낙 고수분들이 가공하여 배포를 해줘서 npm에서 검색을 하면 웬만한 기능은 사용이 가능하다.

그런데 react-slick이라는 좋은 Slide가 사용에 대해서 조금 불편한 점이 있어 그 부분 정리하는 김에 같이 정리하였다.

~~물론 내가 Document를 못 찾는 걸 수 있다....~~

1. 공통

react-slick은 기본적으로 <Slide> 태그 안에서 슬라이드 별 필요한 옵션을 넣어 사용한다.

또 본문에 SlideContainer, SlidePage 같은 태그가 있을 건데, 그건 styled-component를 사용해서 기본적인 디자인을

넣었다.

추가로 기본적으로 제공하는 css 스타일을 적용하기 위해서 두 가지 css 파일을 import 해야 한다.

yarn add slick-carousel

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

최상위 App.js에 추가해도 되고, 아니면 Slide에 import 해주면 된다.

2. SingleSlide

가장 기본적은 Slide이다. 그러므로 자동재생, custom Arrow 같은 옵션을 추가로 설명한다.

import React from "react";
import Slider from "react-slick";
import { SlideContainer, SlidePage } from "../styles";

const SampleNextArrow = (props) => {
  const { className, style, onClick } = props;
  return (
    <div
      className={className}
      style={{ ...style, display: "block", background: "red" }}
      onClick={onClick}
    />
  );
};

const SamplePrevArrow = (props) => {
  const { className, style, onClick } = props;
  return (
    <div
      className={className}
      style={{ ...style, display: "block", background: "green" }}
      onClick={onClick}
    />
  );
};

const SingleSlide = ({}) => {
  const settings = {
    dots: true,
    infinite: true,
    autoplay: true,
    // 슬라이드 변경 시간
    speed: 2000,
    // 자동 재생 유지 시간
    autoplaySpeed: 2000,
    cssEase: "linear",
    centerMode: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    nextArrow: <SampleNextArrow />,
    prevArrow: <SamplePrevArrow />,
  };

  return (
    <SlideContainer>
      <h1>SingleSlide</h1>

      <Slider {...settings}>
        <SlidePage padding={`50px 0`}>1</SlidePage>
        <SlidePage padding={`50px 0`}>2</SlidePage>
        <SlidePage padding={`50px 0`}>3</SlidePage>
        <SlidePage padding={`50px 0`}>4</SlidePage>
        <SlidePage padding={`50px 0`}>5</SlidePage>
        <SlidePage padding={`50px 0`}>6</SlidePage>
        <SlidePage padding={`50px 0`}>7</SlidePage>
      </Slider>
    </SlideContainer>
  );
};

export default SingleSlide;

settings 옵션

- dots : 슬라이드 아래에 dot를 on/off 할 수 있는 옵션

- infinite : 슬라이드가 끝까지 갔을때, 다음을 누를 경우 처음 슬라이드가 나온다.

- speed : 슬라이드가 변경될 때 걸리는 시간

- autoplay : 자동 재생을 on/off할 수 있는 옵션

- autoplaySpeed : 자동 재생으로 슬라이드가 넘어가는 주기

- slidesToShow : 한번에 보이는 슬라이드의 개수

- slidesToScroll : 한번 이동할 때 넘어가는 슬라이드 개수

- nextArrow, prevArrow : 이전, 다음 화살표를 커스텀할 수 있다. 이 부분은 아래에 더 깊게 설명

nextArrow, prevArrow

이전, 다음 화살표를 커스텀할 수 있는 옵션이다.

const SampleNextArrow = (props) => {
  const { className, style, onClick } = props;
  return (
    <div
      className={className}
      style={{ ...style, display: "block", background: "red" }}
      onClick={onClick}
    />
  );
};

const SamplePrevArrow = (props) => {
  const { className, style, onClick } = props;
  return (
    <div
      className={className}
      style={{ ...style, display: "block", background: "green" }}
      onClick={onClick}
    />
  );
};

react-slick이 props를 통해 className, style, onClick을 받은 다음 원하는 디자인의 화살표를 만들 수 있다.

컴포넌트 형식으로 만든 다음 settings 옵션에 넣어주면 화면에 나온다.

3. MultipleRowSlide

생각보다 많이 사용되는 MultipleRowSlide이다.

import React from "react";
import Slider from "react-slick";
import { MultiItem, SlideContainer, SlidePage } from "../styles";

const MultipleSlide = () => {
  const settings = {
    className: "center",
    centerMode: true,
    infinite: true,
    centerPadding: "100px",
    slidesToShow: 3,
    speed: 500,
    rows: 2,
    slidesPerRow: 2,
  };

  return (
    <SlideContainer>
      <h1>MultipleRowSlide</h1>

      <Slider {...settings}>
        <SlidePage>
          <MultiItem>1</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>2</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>3</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>4</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>5</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>6</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>7</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>8</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>9</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>10</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>11</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>12</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>13</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>14</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>15</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>16</MultiItem>
        </SlidePage>
      </Slider>
    </SlideContainer>
  );
};

export default MultipleSlide;

settings 옵션

- rows : 몇 줄짜리 슬라이드를 만들지 결정할 수 있다.

- slidesPerRow : 한 슬라이드에 몇 개를 나타낼지 정할 수 있다.

=> 만약 rows : 2, slidePerRow : 2 경우 한 슬라이드는 4개의 item으로 구성된다.

4. CenterSlide

슬라이드가 가운데서부터 시작되는 슬라이드!

import React from "react";
import Slider from "react-slick";
import { MultiItem, SlideContainer, SlidePage } from "../styles";

const CenterSlide = () => {
  const settings = {
    className: "center",
    centerMode: true,
    infinite: true,
    centerPadding: "60px",
    slidesToShow: 3,
    speed: 500,
  };

  return (
    <SlideContainer>
      <h1>CenterSlide</h1>

      <Slider {...settings}>
        <SlidePage>
          <MultiItem>1</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>2</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>3</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>4</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>5</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>6</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>7</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>8</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>9</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>10</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>11</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>12</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>13</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>14</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>15</MultiItem>
        </SlidePage>
        <SlidePage>
          <MultiItem>16</MultiItem>
        </SlidePage>
      </Slider>
    </SlideContainer>
  );
};

export default CenterSlide;

settings 옵션

- centerMode : centerMode를 on/off 할 수 있는 옵션

- centerPadding : centerMode를 할 경우 좌우 여백을 얼마나 줄 것인지 결정
( 이 옵션을 통해 다음, 이전 슬라이드가 부분적으로 보인다. )

특이사항

위 내용만 사용하면 centerMode의 가운데 슬라이드가 강조하는 등의 설정이 안 된다.

해당 부분은 추가로 css 옵션을 줘야 한다. ( 사실상 이 부분 때문에 정리하였다, 나같이 찾아다니는 사람이 없길... )

export const MultiItem = styled.div`
  color: #e67e22;
  opacity: 1;
  transform: scale(1.04);
`;

export const SlideContainer = styled.div`
  padding: 0 20px;

  /* width 옵션으로 전체 width 값을 지정할 수 있음 */
  /* width: 500px; */

  .center .slick-center ${MultiItem} {
    /* center 모드일때 center에게 강조할 경우 사용 */
    color: #e67e22;
    opacity: 1;
    transform: scale(1.06);
  }

  .center ${MultiItem} {
    /* center 모드일때 center 외 속성에게 사용 */
    opacity: 0.8;
    transition: all 300ms ease;
    transform: scale(0.99);
  }
`;

export const SlidePage = styled.div`
  text-align: center;

  background-color: skyblue;

  padding: ${(props) => props.padding};

  ${MultiItem} {
    /* center 옵션의 경우 MultiTem 속성을 추가로 사용해서 내부 옵션을 추가로 줘야함 */
    background: #00558b;
    color: #fff;
    font-size: 36px;
    line-height: 100px;
    margin: 10px;
    padding: 2%;
    position: relative;
    text-align: center;
  }
`;

styled-component를 사용해서 커스텀했는데,

  . center .slick-center ${MultiItem} {
    /* center 모드일 때 center에게 강조할 경우 사용 */
    color: #e67e22;
    opacity: 1;
    transform: scale(1.06);
  }

실제 center 슬라이드에게 주고 싶은 경우 넣어주면 된다.

  ${MultiItem} {
  /* center 옵션의 경우 MultiTem 속성을 추가로 사용해서 내부 옵션을 추가로 줘야 함 */
  background: #00558b;
  color: #fff;
  font-size: 36px;
  line-height: 100px;
  margin: 10px;
  padding: 2%;
  position: relative;
  text-align: center;
  opacity: 0.8;
  transition: all 300ms ease;
  transform: scale(0.99);
}

center 슬라이드 외 다른 슬라이드에게 차별점을 주고 싶을 경우 넣어준다.

5. VariableWidthSlide

width 값을 자유롭게 변경할 수 있는 슬라이드!

import React from "react";
import Slider from "react-slick";
import { SlideContainer, SlidePage } from "../styles";

const VariableWidthSlide = ({}) => {
  const settings = {
    dots: true,
    infinite: true,
    centerMode: true,
    slidesToScroll: 1,
    variableWidth: true,
  };

  return (
    <SlideContainer>
      <h1>VariableWidthSlide</h1>

      <Slider {...settings}>
        <SlidePage style={{ width: 100 }} padding={`50px 0`}>
          100
        </SlidePage>
        <SlidePage style={{ width: 400 }} padding={`50px 0`}>
          400
        </SlidePage>
        <SlidePage style={{ width: 700 }} padding={`50px 0`}>
          700
        </SlidePage>
        <SlidePage style={{ width: 200 }} padding={`50px 0`}>
          200
        </SlidePage>
        <SlidePage style={{ width: 500 }} padding={`50px 0`}>
          500
        </SlidePage>
        <SlidePage style={{ width: 300 }} padding={`50px 0`}>
          300
        </SlidePage>
        <SlidePage style={{ width: 1000 }} padding={`50px 0`}>
          1000
        </SlidePage>
      </Slider>
    </SlideContainer>
  );
};

export default VariableWidthSlide;

settings 옵션

variableWidth : width 값 자유도를 on/off로 설정할 수 있다.

6. VerticalModeSlide

좌우 슬라이드가 아닌 위아래 슬라이드로 변경한 슬라이드

import React from "react";
import Slider from "react-slick";
import { SlideContainer, SlidePage } from "../styles";

const VerticalModeSlide = ({}) => {
  const settings = {
    dots: true,
    infinite: true,
    cssEase: "linear",

    slidesToShow: 3,
    slidesToScroll: 1,
    vertical: true,
  };

  return (
    <SlideContainer>
      <h1>VerticalModeSlide</h1>

      <Slider {...settings}>
        <SlidePage padding={`50px 0`}>1</SlidePage>
        <SlidePage padding={`50px 0`}>2</SlidePage>
        <SlidePage padding={`50px 0`}>3</SlidePage>
        <SlidePage padding={`50px 0`}>4</SlidePage>
        <SlidePage padding={`50px 0`}>5</SlidePage>
        <SlidePage padding={`50px 0`}>6</SlidePage>
        <SlidePage padding={`50px 0`}>7</SlidePage>
      </Slider>
    </SlideContainer>
  );
};

export default VerticalModeSlide;

settings 옵션

vertical : vertical 모드를 on/off 할 수 있는 옵션

7. Gallery Slide

위에 메인 슬라이드가 있고 아래에 서브 슬라이드가 있는 형식이다.

react slick에서는asNavFor이라는 명칭으로 지정되어있다.

import React, { useState } from "react";
import Slider from "react-slick";
import { SlideContainer, SlidePage } from "../styles";

const GallerySlide = () => {
  const [mainSlide, setMainSlide] = useState();
  const [subSlide, setSubSlide] = useState();

  return (
    <SlideContainer>
      <h1>GallerySlide</h1>

      <Slider asNavFor={subSlide} ref={(slider) => setMainSlide(slider)}>
        <SlidePage padding={`50px 0`}>1</SlidePage>
        <SlidePage padding={`50px 0`}>2</SlidePage>
        <SlidePage padding={`50px 0`}>3</SlidePage>
        <SlidePage padding={`50px 0`}>4</SlidePage>
        <SlidePage padding={`50px 0`}>5</SlidePage>
        <SlidePage padding={`50px 0`}>6</SlidePage>
        <SlidePage padding={`50px 0`}>7</SlidePage>
      </Slider>

      <Slider
        asNavFor={mainSlide}
        ref={(slider) => setSubSlide(slider)}
        slidesToShow={3}
        focusOnSelect={true}
      >
        <SlidePage padding={`50px 0`}>1</SlidePage>
        <SlidePage padding={`50px 0`}>2</SlidePage>
        <SlidePage padding={`50px 0`}>3</SlidePage>
        <SlidePage padding={`50px 0`}>4</SlidePage>
        <SlidePage padding={`50px 0`}>5</SlidePage>
        <SlidePage padding={`50px 0`}>6</SlidePage>
        <SlidePage padding={`50px 0`}>7</SlidePage>
      </Slider>
    </SlideContainer>
  );
};

export default GallerySlide;

settings 옵션

asNavFor : 각자 바라보고 있는 Slide의 ref를 넣어주면 슬라이드 이동 시 같이 이동된다.

저작자표시 비영리 변경금지

'React > Npm' 카테고리의 다른 글

[React] npm 배포 시 문제 (0)	2023.03.26
[NPM] React SNS Login 패키지 만들기 (1)	2022.03.30

0. 들어가면서

1. 공통

2. SingleSlide

nextArrow, prevArrow

3. MultipleRowSlide

4. CenterSlide

특이사항

5. VariableWidthSlide

6. VerticalModeSlide

7. Gallery Slide

'React > Npm' 카테고리의 다른 글

티스토리툴바