[React] react-slick 이용해서 슬라이드 만들기

표상우·2022년 8월 3일

React React-slick

Spot:s

목록 보기

2/2

Spot:s 프로젝트에서 메인 홈페이지에는 슬라이드를 이용할 곳이 2개나 있었다. 하지만 처음 접해보는 기술이었기 때문에 어렵기도 복잡해서 라이브러리를 이용해서 구현했다.

페이지의 상단에 베너와

오늘의 번개 모임이라는 Component들에서 슬라이드를 사용해야 했다.

React-Slick 이용해 슬라이더 만들기

우선 react-slick이라는 라이브러리를 이용할 것이기 때문에

yarn add react-slick

위 명령어를 터미널창에 입력한 뒤 react-slick 라이브러리를 설치한다.
react-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>
    );
  }
}

이러한 구조로 사용된다. Slider 태그 안에 settings을 이용해 슬라이더에 대한 설정을 해주면 슬라이드 전체에 대한 설정을 할 수 있다. 또한 css에서 개별적인 설정과 화살표, 점등등 많은 다양한 설정을 할 수 있다.

이번 프로젝트에서는 styled-component를 이용하기 때문에 styles.jsx 파일을 이용해 슬라이더 설정을 구체적으로 할 수 있었다.

Problem

슬라이더의 화살표가 안보임

styled-component로 설정을 하던중 settings의 값을 arrows: true로 하더라도 아무리 봐도 화살표가 안보였다. 크기도 바꾸어 보고 함수를 이용해서 표시를 하려 했지만 개발자 창을 확인하니 화살표는 있다고 하는데 뷰로는 화살표가 보이지 않아 이 화살표를 나타나게 하는데 애를 썼다.

슬라이더 마다 다른 값들 표시

슬라이더 의 아래쪽에

각각의 슬라이더 마다 인원의 수에 의해 바의 길이가 달라져야 하는 문제가 있었다.

Solution

화살표 문제

화살표가 보이지 않던 이유는 화살표가 슬라이드 뒤에 있었기 때문이었다.
화살표에 z-index: 10값을 줘서 화살표를 웹 뷰의 맨 앞으로 끌어온뒤 설정을 마무리 했다.

각각 다른 값 주기

props로 값을 준 뒤 그 값을 styled-component 에서 처리해 바의 길이를 조절 하였다.

Code

Component

const Impromptu = () => {
  const settings = {
    dots: false,
    infinite: true,
    speed: 1000,
    //autoplay: true,
    autoplayspeed: 1000,
    slidesToShow: 3,
    slidesToScroll: 1,
    arrows: true,
    pauseOnHover: true,
    nextArrow: <NextArrow />,
    prevArrow: <PrevArrow />,
  };
  return (
    <styled.Box>
      <styled.ImpromptuText>
        오늘 뜬 번개 모임 : <styled.ImpromptuImg />
      </styled.ImpromptuText>
      <styled.StyledSlider {...settings}>
        <styled.MeetingBox>
          <styled.MeetingName>모임 이름</styled.MeetingName>
          <styled.MeetingDate>07.08/17:00</styled.MeetingDate>
          <styled.MeetingPlace>모임 장소</styled.MeetingPlace>
          <styled.MeetingStatus>
            <styled.MeetingIcon />
            <styled.MeetingBar>
              <styled.MeetingBarStatus width="80%" />
            </styled.MeetingBar>
          </styled.MeetingStatus>
          <styled.MeetingNumber>4/5</styled.MeetingNumber>
        </styled.MeetingBox>
		</styled.StyledSlider>
    </styled.Box>

styled-component

export const StyledSlider = styled(Slider)`
  margin-left: 19%;
  width: 60%;
  text-align: center;

  .slick-list {
    overflow: hidden;
    height: 15.5vw;
    text-align: center;
  }

  .slick-arrow {
    display: flex;
    z-index: 10;
    width: 1vw;
    height: 1vw;
  }

  .slick-prev {
    left: -1.2vw;
    cursor: pointer;
    &::before {
      content: '';
    }
  }

  .slick-next {
    right: -1.1vw;
    cursor: pointer;
    &::before {
      content: '';
    }
  }
`;