[React] 라이브러리 없이 이미지 슬라이더 만드는 방법 2

지난 글에서는 absolute와 opacity를 이용하여 슬라이더를 만들어 보았습니다.

이번 글에서는 CSS의 translateX 속성을 이용하여 옆으로 이동하는 이미지 슬라이더를 만들어 보겠습니다.

 

 

먼저 완성샷입니다.

이동 버튼과 페이지네이션까지 구현한 모습입니다.

 

다만 문제는...

마지막 슬라이드에서 Next 버튼 클릭 시 맨 처음 슬라이드로 거꾸로 돌아갑니다.

 

첫번째 슬라이드에서 Prev 버튼을 누를 때도 왼쪽으로 이동하는게 아니라,

오른쪽 방향으로 이동하여 중간에 있는 모든 이미지를 거쳐 마지막 슬라이드에 도달하게 됩니다.

 

---

translateX를 이용하여 이미지 슬라이더 만들기

※ CSS는 styled-components 라이브러리를 사용했습니다.

 

0. 구현 원리 한눈에 보기

이미지를 일렬로 쭉 나열한 다음

translateX를 통해 이미지를 이동시키는 원리입니다.

 

실제로는 저 핑크색 버튼이 있는 구간만 보이는데

이해를 돕기 위해 overflow:hidden 속성을 잠시 지워보았습니다.

 

첫번째 이미지는 원래 그 자리여서 이동시킬 필요가 없으니까 translateX(0)

 

두번째 이미지는 저 핑크색 버튼이 있는 구간의 너비만큼 왼쪽으로 이동시키면 되겠죠?

그래서 translateX(-100%)

 

세번째 이미지는 translateX(-200%)

네번째 이미지는 translateX(-300%)

이런식으로 이미지 순서에 따라 이동폭을 늘려서, 화면에 보일 슬라이더를 결정하는 방식입니다.

 

 

1. useState로 화면에 보여질 슬라이드 번호 지정

function Slider2() {
  const [slideIndex, setSlideIndex] = useState(0);

useState로 slideIndex라는 state를 만들어줍니다.

첫번째 슬라이드는 이동폭이 0이기 때문에 초기값은 0으로 설정해주세요.

 

2.  슬라이드 나열, 이동 버튼 생성

return (
    <Container>
      <Arrow direction="prev">◀</Arrow>
      <Wrapper slideIndex={slideIndex}>
        {data.map((character) => (
          <Slide key={character.id}>
            <Photo
              src={process.env.PUBLIC_URL + `/img/slider/${character.img}`}
            />
          </Slide>
        ))}
      </Wrapper>
      <Arrow direction="next"}>▶</Arrow>
    </Container>
  );
}

슬라이드와 버튼을 담을 Container 컴포넌트를 만들어줍니다.

 

Prev, Next 버튼도 만들어주고,

Wrapper 컴포넌트를 만들어 그 안에 map을 통해 Slide 컴포넌트를 나열해주세요.

 

Arrow 버튼 컴포넌트에는 버튼 방향을 props로 전달해주시고,

Wrapper 컴포넌트에는 slideIndex를 props로 전달해주세요.

translateX를 통해 움직이는 대상이 바로 Wrapper 컴포넌트이기 때문에

slideIndex를 props로 받아 움직이는 거리를 조절해줄꺼에요.

 

3. CSS 속성 지정

const Container = styled.div`
// 크기 지정
  width: 200px;
  height: 200px;
  
// 윗 여백, 가운데 정렬
  margin: 100px auto;
  
// Container 크기를 초과하는 부분 숨기기
  overflow: hidden;
  
// position: absolute인 Arrow 컴포넌트 배치
  position: relative;
`;

const Wrapper = styled.div`
// 부모 요소인 Container 컴포넌트의 높이에 맞추기
// width는 지정하지 말 것!
  height: 100%;
  
// flex를 통해 Slide 일렬로 나열
  display: flex;
  
// 이동할 때 트랜지션 적용
  transition: all 0.3s ease-in-out;
  
// props로 넘겨받은 slideIndex에 따라 x축 이동폭 결정
  transform: translateX(${({ slideIndex }) => slideIndex * -100 + "%"});
`;

const Slide = styled.div`
// 부모 요소인 Wrapper의 width가 정해지지 않았으므로
// 조부모 요소인 Container 컴포넌트의 width에 맞춰짐
  width: 100%;
  height: 100%;
  
// 부모 요소의 너비에 상관없이 자신의 크기를 유지하는 속성
  flex-shrink: 0;
`;

const Photo = styled.img`
  width: 100%;
  height: 100%;
  object-fit: cover;
`;

const Arrow = styled.div`
// Container 컴포넌트 기준으로 배치
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  
// Prev 버튼은 left: 0, Next 버튼은 right: 0
  left: ${({ direction }) => direction === "prev" && "0px"};
  right: ${({ direction }) => direction === "next" && "0px"};
  
// 크기, 스타일 지정
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: pink;
  cursor: pointer;
  
// 내부 가운데 정렬
  display: flex;
  justify-content: center;
  align-items: center;

// Prev 버튼이 Slide에 가리지 않도록 z-index 지정
  z-index: 1;
`;

Container 컴포넌트를 통해 슬라이더의 크기를 정해줍니다.

 

Wrapper 컴포넌트는 가로로 쭉 나열된 Slide를 감싸는 요소이기 때문에 width 값은 따로 지정하지 않습니다.

 

props로 넘겨받은 slideIndex에 따라 translateX의 이동폭을 설정해줍니다.

이동 버튼을 한 번 클릭할 때마다, 부모 요소인 Container 컴포넌트의 width만큼 이동해야 하기 때문에

단위는 % 로 잡아줍니다. (% 단위는 부모 요소 기준입니다.)

 

transform: translateX(${({ slideIndex }) => slideIndex * -100 + "%"});

slideIndex가 0이면 0% (이동안함)
slideIndex가 1이면 -100% (x축 왼쪽으로 부모요소 width만큼 이동)
slideIndex가 2이면 -200% (x축 왼쪽으로 부모요소 width 2배만큼 이동)

 

Slide 컴포넌트에는 flex-shrink: 0 속성을 추가해줍니다.

이 속성이 없으면, 부모 요소인 Wrapper 컴포넌트 width에 맞추기 위해 width가 줄어들게 됩니다.

flex-shrink:0 을 추가하면 부모 요소의 너비에 상관없이 자신의 크기를 그대로 유지합니다.

 

4. Prev, Next 버튼 클릭 함수 만들기

  const moveToPrevSlide = () => {
    setSlideIndex((prev) => (prev === 0 ? data.length - 1 : prev - 1));
  };

  const moveToNextSlide = () => {
    setSlideIndex((prev) => (prev === data.length - 1 ? 0 : prev + 1));
  };
  
<Arrow direction="prev" onClick={moveToPrevSlide}>◀</Arrow>
<Arrow direction="next" onClick={moveToNextSlide}>▶</Arrow>

Prev 버튼을 눌렀을 때

기존 slideIndex가 0이면(첫번째 슬라이드이면) slideIndex를 data.length -1(마지막 슬라이드)로 바꿔줍니다.

(slideIndex가 0부터 시작했기 때문에 마지막 슬라이드의 번호는 배열 길이-1이 됩니다.)

그 외 경우에는 slideIndex를 1씩 감소시킵니다.

 

Next 버튼을 눌렀을 때

기존 slideIndex가 data.length-1이면(마지막 슬라이드라면) slideIndex를 0으로(첫번째 슬라이드)로 바꿔주고,

그 외 경우에는 slideIndex를 1씩 증가시킵니다.

 

Arrow 컴포넌트에 onClick 이벤트 핸들러를 달아줍니다.

 

5. 페이지네이션 구현하기

const moveDot = (index) => {
    setSlideIndex(index);
  };
 
 <DotContainer>
        {data.map((character, index) => (
          <Dot
            key={character.id}
            className={index === slideIndex ? "active" : null}
            onClick={() => moveDot(index)}
          />
        ))}
 </DotContainer>

DotContainer를 만들고 그 안에 map을 통해 Dot을 나열해줍니다.

map의 두번째 인자인 index를 사용하여 index와 현재 slideIndex가 일치할 때

active라는 클래스를 부여해줍니다.

 

Dot 클릭 시 index를 인자로 받아 slideIndex를 변경해줍니다.

Wrapper에 props로 전달된 slideIndex에 따라 x축 이동폭이 달라지고,

slideIndex에 맞는 이미지가 화면에 표시됩니다.

 

const DotContainer = styled.div`
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100px;
  display: flex;
  justify-content: space-between;
`;

const Dot = styled.div`
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: pink;
  cursor: pointer;
  &.active {
    background-color: skyblue;
  }

Dot 컴포넌트에서는 active 클래스를 통해

현재 클릭된 Dot만 배경색을 다르게 설정해줍니다.

 

 

전체 코드

import { useState } from "react";
import styled from "styled-components";
import data from "./data";

function Slider2() {
  const [slideIndex, setSlideIndex] = useState(0);

  const moveToPrevSlide = () => {
    setSlideIndex((prev) => (prev === 0 ? data.length - 1 : prev - 1));
  };

  const moveToNextSlide = () => {
    setSlideIndex((prev) => (prev === data.length - 1 ? 0 : prev + 1));
  };

  const moveDot = (index) => {
    setSlideIndex(index);
  };

  return (
    <Container>
      <Arrow direction="prev" onClick={moveToPrevSlide}>
        ◀
      </Arrow>
      <Wrapper slideIndex={slideIndex}>
        {data.map((character) => (
          <Slide key={character.id}>
            <Photo
              src={process.env.PUBLIC_URL + `/img/slider/${character.img}`}
            />
          </Slide>
        ))}
      </Wrapper>
      <Arrow direction="next" onClick={moveToNextSlide}>
        ▶
      </Arrow>
      <DotContainer>
        {data.map((character, index) => (
          <Dot
            key={character.id}
            className={index === slideIndex ? "active" : null}
            onClick={() => moveDot(index)}
          />
        ))}
      </DotContainer>
    </Container>
  );
}

export default Slider2;

const Container = styled.div`
  width: 200px;
  height: 200px;
  margin: 100px auto;
  overflow: hidden;
  position: relative;
`;

const Wrapper = styled.div`
  height: 100%;
  display: flex;
  transition: all 0.3s ease-in-out;
  transform: translateX(${({ slideIndex }) => slideIndex * -100 + "%"});
`;

const Slide = styled.div`
  width: 100%;
  height: 100%;
  flex-shrink: 0;
`;

const Photo = styled.img`
  width: 100%;
  height: 100%;
  object-fit: cover;
`;

const Arrow = styled.div`
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  left: ${({ direction }) => direction === "prev" && "0px"};
  right: ${({ direction }) => direction === "next" && "0px"};
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: pink;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 1;
`;

const DotContainer = styled.div`
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100px;
  display: flex;
  justify-content: space-between;
`;

const Dot = styled.div`
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: pink;
  cursor: pointer;
  &.active {
    background-color: skyblue;
  }
`;

// data.js

const data = [
  {
    id: 1,
    name: "우영우",
    nickname: "천재 변호사",
    img: "youngwoo.jpg",
  },
  {
    id: 2,
    name: "이준호",
    nickname: "섭섭한데요",
    img: "junho.jpg",
  },
  {
    id: 3,
    name: "정명석",
    nickname: "유니콘 상사",
    img: "myeongseok.jpg",
  },
  {
    id: 4,
    name: "최수연",
    nickname: "봄날의 햇살",
    img: "suyeon.jpg",
  },
  {
    id: 5,
    name: "권민우",
    nickname: "권모술수",
    img: "minwoo.jpg",
  },
];

export default data;