react-slick arrow custom

이전에도 react-slick arrow custom을 했지만, 같은 방법으로 했는데
(여기에 기본 설치와 커스텀 방법이 있음)
한쪽(왼쪽) arrow가 이미지의 맨 아래로 들어가서 zIndex가 적용되지 않는 상황이 발생했다. 왜지??

그래서 찾아헤멘 두번째 방법!

react-slick arrow custom

1. settings에 있는 arrow를 false로!

const settings = {
        dots: false,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows:false,
    };

2. useRef 선언

• previous와 next를 useCallback을 이용한 함수 만들기
  (아직 이해는 잘 안됨.....)

    const slickRef = useRef(null);

    const previous = useCallback(() => slickRef.current.slickPrev(), []);
    const next = useCallback(() => slickRef.current.slickNext(), []);

3. slider에 ref 바인딩

  <Slider {...settings} ref={slickRef}>
    ...

4. arrow 커스텀

• onClick에 위에서 선언한 ref 바인딩
• arrow 이미지 불러와서 원하는 위치로 스타일링

      <div>
        <div className={styles.previous} onClick={previous}>
          <img
            src={"/pre-arrow.svg"}
            alt={"pre-arrow"}
          />
        </div>

        <div className={styles.next} onClick={next}>
          <img
            src={"/next-arrow.svg"}
            alt={"next-arrow"}
          />
        </div>
      </div>

끝!

전체 코드(스타일 제외)

import Slider from "react-slick";
import { useCallback, useRef } from "react";

export default function PortfolioModalCarousel() {
  const slickRef = useRef(null);

  const previous = useCallback(() => slickRef.current.slickPrev(), []);
  const next = useCallback(() => slickRef.current.slickNext(), []);

  const settings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
  };

  // 슬릭에 임시로 넣을 이미지
  const images = [
    { src: "/rabbit.png", title: 1 },
    { src: "/rabbit.png", title: 2 },
    { src: "/rabbit.png", title: 3 },
    { src: "/rabbit.png", title: 4 },
  ];

  return (
    <div>
      <div>
        <Slider {...settings} ref={slickRef}>
          {images.map((el) => (
            <div key={el.title}>
              <img src={el.src}/>
            </div>
          ))}
        </Slider>
      </div>
		// 이전 arrow
      <div>
        <div onClick={previous}>
          <img
            src={"/assets/img/client/ico/pre-arrow.svg"}
            alt={"pre-arrow"}
          />
        </div>
		// 다음 arrow
        <div onClick={next}>
          <img
            src={"/assets/img/client/ico/next-arrow.svg"}
            alt={"next-arrow"}
          />
        </div>
      </div>
    </div>
  );
}

다음 이전 arrow 잘됩니당!
자세한 설명은 아래의 참고 사이트에서~

참고 | https://okayoon.tistory.com/entry/%EC%9D%B8%ED%94%84%EB%9F%B0-React-%EA%B0%95%EC%9D%98-%EB%93%A3%EA%B3%A0-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0-Front-%EC%9E%91%EC%97%85-08-react-slick%EC%9C%BC%EB%A1%9C-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0-custom-pagination