[React] 슬라이드 만들기가 쉬워지는 마법의 라이브러리

현재 TOYOTA 랜딩 페이지를 클론코딩하고 있다.

해당 페이지를 대충 살펴보니 상품 소개나, 이벤트 배너 등을 표시하는 슬라이드가 즐비해있었다.

' 내가 이걸 다 만들 수 있을까? '라는 생각과 함께 그냥 도전.

---

라이브러리

내가 이번 프로젝트를 하며 알게 된 마법같은 라이브러리는 아래의 두 개다.

• react-responsive-carousel
• react-multi-carousel

react-multi-carousel npm page

react-responsive-carousel npm page

두 라이브러리 모두 npm 페이지에 인스톨링부터 사용법까지 친절하게 설명되어 있기 때문에 사용하는데 어려움은 없었다.

기본적으로 두 라이브러리 모두 <Carousel>이라는 태그를 import 해서 사용한다.

그리고 속성값으로 자동슬라이드, 상태표시, 슬라이드 속도, 무한루프 등 다양하고 유용한 기능을 제공한다. 

 

여기서 의문점이 있을 수 있다.

'같은 캐러셀(슬라이드)을 만드는 라이브러리인데 왜 라이브러리를 두 개나 사용하는가?'

내가 사용법을 잘 숙지하지 못해서 일지도 모르지만

react-responsive-carousel은 하나의 이미지만 표시하는 슬라이드를

react-multi-carousel은 여러 이미지를 한 번에 표현하는 슬라이드를 만드는데 용이한 것 같다.

 

두 라이브러리 모두 18 버전 이후의 react에서도 잘 호환이 되기 때문에 버전 이슈는 크게 없었다.

---

완성본

react-responsive-carousel을 이용해 만든 toyota 랜딩 페이지 메인 배너

 

react-muitl-carousel을 이용해 만든 toyota 랜딩 페이지  차종별 라인업 슬라이드

https://mediumryan.github.io/toyota-home/

Toyota Home

---

참고

react-responsive-carousel

https://www.npmjs.com/package/react-responsive-carousel?activeTab=readme

react-responsive-carousel

react-multi-carousel

https://www.npmjs.com/package/react-multi-carousel

react-multi-carousel

TOYOTA

https://toyota.jp/?padid=from_tjptop_menu_logo

トヨタ自動車WEBサイト