[react-slick] 페이지 번호, 커스텀 화살표

import { useState } from "react";

// img
import { ReactComponent as NavArrowRightIcon } from "../../../assets/svg/ic_nav_arrow_right.svg";
import { ReactComponent as NavArrowLeftIcon } from "../../../assets/svg/ic_nav_arrow_left.svg";

최상단 import 부분

 

const images = [
  "https://i.ytimg.com/vi/i2i0uzo92gE/maxresdefault.jpg",
  "https://i.ytimg.com/vi/6rTljE9sd68/maxresdefault.jpg",
];

function NextArrow(props: any) {
  const { onClick } = props;
  return (
    <S.Arrow className={`right`} onClick={onClick}>
      <NavArrowRightIcon />
    </S.Arrow>
  );
}

function PrevArrow(props: any) {
  const { onClick } = props;
  return (
    <S.Arrow className="left" onClick={onClick}>
      <NavArrowLeftIcon />
    </S.Arrow>
  );
}

지금은 받아오는 데이터가 없어서 임의로 이미지 배열을 만들었다.

이미지 배열과 화살표들, svg 이미지를 컴포넌트로 받아와서 넣었다.

 

const [slideState, setSlideState] = useState({
    activeSlide: 0,
    activeSlide2: 0,
  });
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    beforeChange: (current: number, next: number) =>
      setSlideState({ activeSlide: next, activeSlide2: current }),
    nextArrow: <NextArrow />,
    prevArrow: <PrevArrow />,
  };

react-slick 설정하는 부분 

beforeChange 부분이 페이지 번호 처리하는 것의 핵심!

nextArrow, prevArrow는 위에 썼던 걸 그대로 넣어준다.

 

          <S.SliderText>
            스크린샷 {slideState.activeSlide + 1}/{images.length}
          </S.SliderText>
          <S.MySlider {...settings}>
            {images?.map((image) => (
              <div>
                <S.SliderImg src={image} />
              </div>
            ))}
          </S.MySlider>

밑에 JSX 작성 부분

 

 

// styles.ts 

export const SliderImg = styled.img`
  position: relative; 
  // Arrow 위치 잡기 위해선 relative여야 한다. 
  width: 965px;
  height: 520px;
  border-radius: 4px;
`;

export const Arrow = styled.p`
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: gray;
  color: #fff;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.3s;
  z-index: 1; 
  // 화살표가 뒤에 묻히길래 z-index 주었다. 

  &.left { 
  // &를 붙여야 한다! 
    left: -34px;
  }

  &.right {
    right: -34px;
  }
`;