슬라이드 만들기

슬라이드 만들기

이미지 준비하기

우선 슬라이드에 활용 할 이미지를 준비한다.

이미지 리스트 만들기

-slideList.ts

export const slideList = [
  {
    id: 1,
    src: "slideImage/img1.jpeg",
    alt: "첫번째 슬라이드",
  },
  {
    id: 2,
    src: "slideImage/img2.jpeg",
    alt: "두번째 슬라이드",
  },
  {
    id: 3,
    src: "slideImage/img3.jpeg",
    alt: "세번째 슬라이드",
  },
  {
    id: 4,
    src: "slideImage/img2.jpeg",
    alt: "세번째 슬라이드",
  },
];

id, src, alt로 이미지의 정보를 담은 리스트를 만든다.

이미지 출력하기

        <Slide>
          <SlideList ref={ref}>
            {slideList.map((v) => {
              return (
                <Inner key={v.id}>
                  <img src={v.src} alt={v.alt} />
                </Inner>
              );
            })}
          </SlideList>
        </Slide>

map를 이용해서 이미지를 출력해준다. 여기서 ref는 js의 DOM 대신 사용한다. 리액트에서는 DOM을 지양하고 useRef를 사용하는 것이 좋다.

그리고 사진 당 100vw를 주고 가로로 배치했다.

버튼 만들기

        <div>
          <div>
            <button onClick={prevButton}>prev</button>
            <button onClick={nextButton}>next</button>
          </div>
          {slideList.map((v) => {
            return (
              <button key={v.id} onClick={() => slideBtn(v.id)}>
                {v.id}
              </button>
            );
          })}
        </div>

각 슬라이드로 바로 가는 버튼은 이미지 개수에 따라 동적으로 만들어 줬다.

 

-prevButotn과 nextButton

 const ref = useRef<any>(null);

  const [size, setSize] = useState(0);

  useEffect(() => {
    console.log(size);
    if (size > 0) {
      setSize(-((slideList.length - 1) * 100));
    }
  }, [size, setSize]);

  const nextButton = useCallback(() => {
    let checkSize = size - 100;

    if (checkSize > -(slideList.length * 100)) {
      setSize(checkSize);
      ref.current.style = `transform: translateX(${checkSize}vw)`;
    } else {
      setSize(0);
      ref.current.style = "transform: translateX(0vw)";
    }
  }, [size, setSize]);

  const prevButton = useCallback(() => {
    let checkSize = size + 100;

    if (checkSize <= 0) {
      setSize(checkSize);
      ref.current.style = `transform: translateX(${checkSize}vw)`;
    } else {
      let temp = -(slideList.length - 1) * 100;
      setSize(temp);
      ref.current.style = `transform: translateX(${temp}vw)`;
    }
  }, [size, setSize]);

1. 첫번째 사진은 0vw, 두번째 사진은 -100vw, 세번째 사진은 -200vw.. 이런식으로 width를 가진다. 따라서 prev 버튼을 누르면 -100vw를 하고 next 버튼을 누르면 100vw를 한다. 그리고 현재 width의 위치는 useState를 활용해서 관리했다.

2. 만약 첫번째 슬라이드에서 prev를 누르면 마지막 슬라이드로 이동하게 했다. 마지막 슬라이드에서도 next를 누르면 첫 슬라이드로 가도록 했다.

3. useRef를 이용해서 css를 다룰 수 있다.

 

-slideBtn

  const slideBtn = useCallback(
    (v: number): void => {
      let width = 100 * (v - 1);
      setSize(-width);
      ref.current.style = `transform: translateX(-${width}vw)`;
    },
    [size, setSize]
  );

이 버튼은 n번째 슬라이드로 바로 이동할 수 있는 버튼이다. 따라서 그 슬라이드의 위치를 계산해서 width를 조절했다.