Simple React Carousel에서 여러 항목을 표시하는 방법

여러분, 안녕하세요!
이것은 내 React Carousel 시리즈의 3부입니다. 이전에는 버튼과 스와이프 컨트롤이 있는 Simple React Carousel을 만들었습니다. 이번에는 Carousel에 여러 항목을 한 번에 표시하는 방법에 대해 이야기하고 싶습니다!

전제 조건

이 시리즈의 제 1부와 2부를 확인하여 간단한 반응 캐러셀을 만들고 스와이프 컨트롤을 추가하는 단계별 가이드를 따르거나 my Github repo에서 직접 가져올 수 있습니다.

여러 항목 표시

이전에는 한 번에 1개의 항목만 표시할 수 있었지만 1개 이상의 항목을 표시하려는 사용 사례가 많이 있습니다. 예를 들어 뷰포트에 비해 이미지가 작은 여러 제품을 표시하려는 경우입니다.

더 많은 이미지 추가

먼저 Carousel에 더 많은 이미지를 추가하고 이미지 사이에 여백을 추가할 수 있도록 div 요소로 래핑합니다.

App.js

 //...
- <img src="https://via.placeholder.com/1600x300" alt="placeholder" />
+ <div>
+     <div style={{padding: 8}}>
+         <img src="https://via.placeholder.com/300x300" alt="placeholder" style={{width: '100%'}} />
+     </div>
+ </div>
 //...

여러 항목 표시

한 번에 여러 항목을 처리하기 위해 Carousel 구성 요소에 props를 1개 더 추가합니다. 이는 show prop입니다. 이것은 Carousel에서 한 번에 항목 수를 표시하는 표시로 사용됩니다. Carousel 소품에 추가해 봅시다.

Carousel.js

 //...
- const {children} = props
+ const {children, show} = props
 //...

이제 show prop을 사용하여 Carousel 자식의 CSS를 조정해야 합니다. 먼저 carousel-content 클래스가 있는 div 요소를 수정해야 합니다.

Carousel.js

 //...
 <div
-     className="carousel-content"
-     style={{ transform: `translateX(-${currentIndex * 100}%)` }}
+     className={`carousel-content show-${show}`}
+     style={{ transform: `translateX(-${currentIndex * (100 / show)}%)` }}
 >
     {children}
 </div>
 //...

그런 다음 CSS도 수정해야 합니다. Carousel이 2, 3, 4 항목을 한 번에 표시할 수 있는 3가지 유형만 표시하고 있습니다.

회전 목마.css

/* ... */
.carousel-content.show-2 > * {
    width: 50%;
}

.carousel-content.show-3 > * {
    width: calc(100% / 3);
}

.carousel-content.show-4 > * {
    width: calc(100% / 4);
}
/* ... */

그런 다음 show props를 App.js 파일의 Carousel 구성 요소에 전달할 수 있습니다.

App.js

 // ...
- <Carousel>
+ <Carousel
+     show={3}
+ >
 // ...

이제 Carousel이 1개 대신 3개 항목을 표시한 것을 이미 볼 수 있습니다.



그러나 보시다시피 다음 버튼을 누를 때 여전히 문제가 있습니다. Carousel은 항목을 올바르게 표시하지 않았거나 더 정확하게는 마지막 항목에 도달한 후에도 계속 스크롤합니다.

이 문제를 해결하려면 사용자가 버튼을 누를 수 있는 시점과 버튼이 표시되는 시점의 조건을 변경해야 합니다.

다음 버튼을 올바르게 처리

Carousel 기능이 제대로 작동하도록 일부 값을 변경해야 합니다.

Carousel.js

 // ...
 const next = () => {
-     if (currentIndex < (length - 1)) {
+     if (currentIndex < (length - show)) {
         setCurrentIndex(prevState => prevState + 1)
     }
 }
 // ...
 {
-     currentIndex < (length - 1) &&
+     currentIndex < (length - show) &&
     <button onClick={next} className="right-arrow">
         &gt;
     </button>
 // ...

그리고 그게 다야!
최종 풀코드는 my Github 에서 확인하실 수 있습니다.