프론트엔드 개발을 하다보면 캐러쉘이라고도 불리는 slider를 구현할 일이 정말정말 많은데 이 때 우리를 정말 편리하게 해주는 갓갓갓라이브러리가 있다.
바로 ✨slick✨이다.
https://www.npmjs.com/package/react-slick
WOW…! 어마 무시한 사용자수…!!
그만큼 유명하고, 관련 글도 많기 때문에 전체적인 사용법 보다는 내가 slick을 사용하며 겪었던 이슈와 해결방법 위주로 글을 작성하고자 한다.
1. breakpoint 설정하기(max-width, min-width)
slick의 breakpoint는 기본적으로 max-width가 기준인 것 같다. 따라서 768px 이상일 때만 slick이 적용되게 하고 싶다면
const settings = {
responsive: [
{
breakpoint: 768,
settings: "unslick",
},
],
}이렇게 코드를 작성해주면 viewport가 768px 미만일 때는 “unslick”이 된다. slider가 적용되지 않는다는 뜻이다.
그렇다면 반대로 768px 미만일 때만 slick이 적용되게 하고 싶다면?
const settings = {
responsive: [
{
breakpoint: 768,
},
{
breakpoint: 9999,
settings: "unslick",
},
],
}우리가 min-width로 속성을 바꿀수는 없기 때문에 우선 slick이 적용되길 원하는 breakpoint를 responsive 안에 설정하고, 매우 큰 범위를 지정해 그 사이에서 unslick을 해주어야 한다.
위와 같이 코드를 적용하면 768px까지는 slick이 적용되고, 769px ~ 9999px 사이의 구간에서는 slick이 적용되지 않는다.
나는 모바일 화면에서만 슬라이더가 구현되야 했기에 위와 같이 코드를 작성했다.
2. customPaging
dots는 기본적으로 false로 설정되어있는데 "dots가 true"여야만 customPaging이 활성화된다.
처음에 이걸 몰라서 엄청엄청 해맸다…
개발자도구를 열어 태그 하나하나씩 다 열어봐도 customPaging과 관련된 태그가 보이질 않아서 GPT에게 물어봤는데
얘가 첨엔 아니라고 했다.
customPaging 속성을 아무리 변경해보고 css를 수정해도 태그 자체가 안보여서 dots를 true로 설정해보았다. 그러자,,,,!!
두둥…!
야,,,, 아깐 아니라며,,, 너 말바꾸기 천재구나?
여기서 얻은 교훈은 GPT를 너무 믿지 말자는 것 하하
GPT를 잘 활용하려면 검증은 필수입니다 여러분^__^
dots를 true로 설정하고 customPaging을 따로 만들지 않으면 기본 dots가 화면에 표시되고, customPaging을 설정해주면 custom 된 slick-dots가 표시된다고 보는 게 더 맞을 것 같다.
내가 구현해야 했던 슬라이드의 조건은
- 현재페이지 / 총페이지 로 표시될 것
- 두자리 숫자로 표시될 것(ex. 6일때는 06으로, 16일때는 16으로)
였다.
/** 캐러쉘 슬라이드 설정 */
const settings = {
...나머지 세팅
//현재 페이지 표시
customPaging: (i: number) => {
return (
<span className="customPaging">
<span className="currentPage">
{/* 숫자 앞에 0 붙이기 */}
{(i + 1).toString().padStart(2, "0")}
</span>
/
<span className="totalPage">
{processCardList.length.toString().padStart(2, "0")}
</span>
</span>
);
},
}-
현재페이지 / 총페이지 로 표시될 것
i는 0부터 시작되기 때문에 현재 페이지 = i+1, 총 페이지는 배열의 길이로 설정해주었다.
-
두자리 숫자로 표시될 것(ex. 6일때는 06으로, 16일때는 16으로)
padStart라는 메서드를 사용했다.string 타입에서만 쓸 수 있기 때문에 먼저 숫자로 변환 후 padStart(2, “0”)을 붙여주었다. 처음에 오는 숫자는 자릿수를 의미한다. 만약 padStart(3, “0”)을 5라는 string에 붙였을 경우 005로 표시가 된다.
위와 같이 설정을 해주고 나면
내가 원하는 건 슬라이드가 이동될 때마다 현재페이지만 바뀌는 건데 01/06 02/06 … 06/06이 모두 화면에 표시될 것이다.
slick dot 하나가 내가 설정한 customPaging으로 바뀌는 것 같다.
dots가 여섯개니까 표시되는 것도 6개…
.slick-dots {
position: absolute;
top: 88.5%;
font-size: 17px;
line-height: 29px;
left: 240px;
font-weight: 600;
li {
display: none; //기본적으로 li 태그들이 안보이게 설정을 해주고
}
.slick-active {
display: block; //활성화된 dot만 표시해준다.
}
.customPaging {
display: flex;
width: 100px;
gap: 10px;
}
.totalPage {
color: ${(props) => props.theme.color.gray.primary};
}
}따라서 위와같이 css를 작성했다.
내가 원하는 건 현재 페이지, 즉 active 상태인 페이지의 dot만 표시되길 원하는 것이기 때문에 모든 li 태그에 display:none 을 걸어주고 slick-active className을 가질 때만 block으로 보이게 설정해주었다.
3. 결과물✨
