slide

내용

react-slick을 사용했다가 패딩 또는 마진값이 마음대로 컨트롤이 잘 안돼서 삽질하다 답답해서 직접 만들어봤다
좀 구식이고 지저분 할 순 있으나, 나름 만족
다음번에는 좀 더 깔끔하게 만들 수 있길 바램
ps. 내가 만든게 훨씬 편함;

코드

 const [sum, setSum] = useState(301);

  const slideHandler = (type: string) => {
    //imgList는 리모델링이라는 큰이미지를 클릭했을때 setState됨
    //img의 갯수가 다 다르기 때문에 길이 * 300을 해줬다
    //여기서의 300은 이미지 width임
    if (type === "next" && sum < imgList.length * 300) {
      setSum(() => sum + 300);
    } else if (type === "prev" && sum > 300) {
      setSum(() => sum - 300);
    } else if (sum === 1) {
      setSum(0);
    } else {
      return;
    }
  };

//처음에는 slideHandler에서 함께 구현했었는데 
//useState의 비동기 방식 때문에 한박자씩 늦게 동작해서
//useEffect로 sum값이 변동될 때마다 실행되게 했더니 바로바로 동작함
  useEffect(() => {
    const slider = document.getElementsByClassName("slider")[0];
    slider.style.transform = `translate3d(-${sum}px, 0px, 0px)`;
  }, [sum]);

return(
  <SlidWrapper>
        <button
          onClick={() => slideHandler("prev")}
          style={{
            position: "absolute",
            left: 0,
            zIndex: 1,
          }}
        >
          {"<"}
        </button>
        <div
          className="slider"
          style={{ display: "flex", transition: "all 1s ease 0s" }}
        >
          {imgList?.map((e, i) => (
            <ListWrapper key={i} onClick={() => setZoomSrc(e)}>
              <ImageStyle src={e} alt="" />
            </ListWrapper>
          ))}
        </div>
        <button
          onClick={() => slideHandler("next")}
          style={{
            position: "absolute",
            right: 0,
          }}
        >
          {">"}
        </button>
      </SlidWrapper>
  )