심화주차 프로젝트 'palette ground'의 메인페이지 상단에 좋아요 갯수를 가장 많이 받은 그림 5개를 베스트 게시글 캐러셀 형태로 출력한다. 캐러셀을 쉽게 구현하기 위해 어떤 라이브러리를 사용해 볼 수 있을지 찾아보다가 React-slick 라이브러리를 써보기로 결정했다.
❓왜 React-slick인가?
구글링 했을 때, 그리고 chatGPT에게 추천을 요청했을 때 다양한 캐러셀 라이브러리를 찾을 수 있었는데, React-Slick에 대한 검색 결과가 가장 많았다. 또한 다른 라이브러리들에 비해 캐러셀 슬라이드의 세부 조정이 용이하고 세밀한 스타일링이 가능한 것 같아서 React-slick을 선택하게 되었다.
그 외에 다른 캐러셀 라이브러리로는 react-responsive-carousel, react-embla-carousel 등이 있었다.
🎠Next.js 프로젝트에 캐러셀 넣기
먼저 react-slick 패키지를 설치해준다. 또한 슬라이더 컴포넌트에서 css를 가져오기 위해 slick-carousel도 함께 설치해준다.
yarn add react-slick
yarn add slick-carousel
그리고 슬라이더를 스타일링하는 css 파일이 node_modules 폴더 깊숙이 숨겨져 있기 때문에 매번 찾아 들어가기가 까다롭다. 그래서 스타일 커스터마이징을 좀 더 용이하게 하기 위해 관련 폴더를 app 레벨로 뽑아왔다.
사진에서처럼 fonts 폴더, slick-theme.css, slick.css를 복사해서 원하는 컴포넌트 폴더 안에 붙여넣었다.
그런 다음 캐러셀이 들어갈 컴포넌트에서 Slider와 slick-theme.css, slick.css를 import 해준다. 클라이언트 사이드에서 실행할 수 있기 때문에 'use client' 해주는 것도 잊지 말자.
'use client';
import Slider from "react-slick";
import "./slick/slick.css"; // --> node_modules에서 import 하고 있다면 경로가 다를 것이다.
import "./slick/slick-theme.css"; // 수정을 용이하게 하기 위해 node_modules의 밖으로 빼내줬다.
/** 캐러셀 설정 */
const settings = {
dots: false,
autoplay: true,
autoplaySpeed: 5000,
speed: 2000,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
};- dots : 캐러셀 아래에 있는 현재 위치를 나타내는 점들 (false: 표시안함)
- autoplay : 자동 슬라이딩 기능 (true: 사용함)
- autoplaySpeed : 자동 슬라이딩 시간 (5000: 5초에 1번씩)
- speed: 수동 슬라이딩 시 이동 속도
- infinite: 마지막 이미지 이후에는 첫번째 이미지로 순서 순환 (true: 사용함)
- slidesToShow: 한번에 출력할 이미지 갯수 (3개)
- slidesToScroll: 스크롤시 한번에 넘길 이미지 갯수(1개)
🎨React-slick 캐러셀 화살표(arrow) 색상 조정하기
React-slick 쓸 때 화살표 색상 어떻게 바꾸냐고 물어보는 수많은 웹문서들....
그리고 그것을 수없이 클릭해 본 나....
이렇게 React-Slick을 이용해서 슬라이더 컴포넌트를 import 하는 데 성공하면, 기본적으로 흰색의 불투명한 화살표가 적용되어 있는 것이 보일 것이다.
우리 사이트는 캐러셀 배경이 밝은 회색이라서, 캐러셀 화살표가 흰색으로 되어 있으면 거의 보이지가 않아서 화살표 색상 변경이 시급했다.
공식 문서를 봐도, 구글링을 해봐도 화살표 스타일링을 변경하는 것이 한 번에 잘 안됐다.
우선 아까 위에서 슬라이더 컴포넌트의 스타일링을 설정하는 2개의 css 파일을 import 했었다. 이 두개는 각각 아래와 같은 역할을 한다.
- slick.css : 캐러셀의 기본 스타일 정의. 레이아웃/배치 등 핵심 스타일링 담당
- slick-theme.css : 테마(화살표, 점 등의 UI 요소) 추가 스타일링 담당
내가 원하는 것은 캐러셀의 prev, next 화살표의 스타일링이기 때문에 해당 내용은 slick-theme.css에서 찾을 수 있다.
.slick-prev:before,
.slick-next:before {
font-family: "slick";
font-size: 20px;
line-height: 1;
opacity: 0.75;
color: #000000; // <----바로 여기
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}바로 이부분! slick-prev는 왼쪽 화살표, slick-next는 오른쪽 화살표에 해당한다. 여기서 color 설정을 #000000 으로 변경했더니 원하는대로 화살표가 검은색으로 잘 변경되었다.
상기한 방식대로 캐러셀을 구현할 시 slick-theme.css파일에서 모듈 어쩌고 오류가 난다면 아래의 코드를 삭제해준다.
/* Slider */
.slick-loading .slick-list
{
background: #fff url('./ajax-loader.gif') center center no-repeat;
}
/* Icons */
@font-face
{
font-family: 'slick';
font-weight: normal;
font-style: normal;
src: url('./fonts/slick.eot');
src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}slick-theme.css파일의 가장 상단에 기본으로 들어가 있는 내용인데, 로딩을 표시하는 gif 파일이랑 폰트를 설정하는 부분이다.
원래 node_modules 폴더에 있었던 파일들을 app 레벨로 옮겨온 거라 경로가 바뀌어서 에러가 날 수 있으니 필요한 기능이 아니라면 그냥 삭제해주면 된다.
