필자는 반응형 캐러셀 즉, 무한 슬라이드를 만들었다!
각 연주자분들의 프로필이 옆으로 넘어가며 쭉 보여지면 좋을 거 같다고 생각을 했다.
그럼 어떻게 이를 구현할 것인가 고민을 한 흔적을 작성해보겠다!
React-slick vs Swiper 🚀
먼저 필자는 Swiper를 선택했다. 그 기준에는 2가지 이유가 있다.
다운로드 수 🎯
Swiper가 React-slick 보다 50%정도 더 많은 다운로드 수를 기록한다.
그만큼 참고할 커뮤니티의 수가 많을 것이라 판단했다! 그리고 더욱 많은 사람들이 사용하니 더 안정적이지 않을까 라는 생각을 했다!
프로그래머스 소개 페이지도 Swiper네 🎯
필자가 현재 수강하고 있는 프로그래머스의 소개 페이지에 반응형 캐러셀이 있던게 떠올라서 페이지를 열어본 결과!
Swiper로 개발되어있음을 알 수 있었다. 뭔가 ㅎㅎ 더 반갑고 이렇게 구현 됐으면 했기에 이와 동일한 라이브러리를 채택하기로 했다.
Truble Shooting ☄️
문제사항 1 🧗
Swiper는 Navigator가 Swiper안에 들어가있다.
그래서 필자는 Navigator를 비롯한 Pagination에 대한 설정을 바꾸기 위해 방법을 찾아보았다!
정리하자면 내가 원하는 방법 디자인으로 custom 하고싶다!
해결방법 🏋️
- css class 찾아서 해당 css에 새로운 Style을 덮어씌우기
위 페이지를 보면 해당 class를 살펴볼 수 있다.
그리고 해당 class에 적용된 style을 볼 수 있는데 필자는
.swiper-pagination 이라는 class에 담긴 Style에서 position을 Relative로 바꾸고 싶었다.
기존에는 absolute로 되어있어서 pagenation과 navigator가 겹쳐지는 현상이 있었다.
그래서 Navigator에 대한 click 이벤트가 제대로 발동되지 않는 문제가 있었다.
그래서 필자는 다음과 같이 해결했다.
문제사항 2 🧗
Swiper는 Navigator를 슬라이더 내부에만 사용이 가능했다는 점이다.
즉, CSS로는 수정이 불가능했고 이 슬라이더 이벤트를 다른 곳에 위임? 을 해야했다. 그래서 방법을 찾아보았다.
해결방법 🏋️
위 페이지를 들어가면 이러한 코드를 볼 수 있다.
const prevRef = useRef(null);
const nextRef = useRef(null);
return (
<Swiper
onInit={(swiper) => {
swiper.params.navigation.prevEl = prevRef.current;
swiper.params.navigation.nextEl = nextRef.current;
swiper.navigation.init();
swiper.navigation.update();
}}
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<div ref={prevRef}>Prev</div>
<div ref={nextRef}>Next</div>
</Swiper>
);즉, swiper의 기존 prevEl에 대한 이벤트를 새로운 div요소로 전달해주는 것이다.
즉, ref로 select한 html요소를 클릭하면 해당 동작이 이루어질수 있게 해주니 잘되었다.
