How to Show Multiple Item in Simple React Carousel

Hello everyone!
This is part 3 of my React Carousel series. Previously we've created a Simple React Carousel with button and swipe control. This time I want to talk about how to show multiple item on the Carousel at once!

Prequisites

Check my part 1 and 2 of this series to follow a step by step guide to make a simple react carousel and add swipe control, or you can pull directly from my Github repo.

Show multiple item

Previously we can show only 1 item at a time, but there are a lot of use case where you might want to show more than 1 item. For example is when you want to display multiple product that have smaller images compared to the viewport.

Add more images

First of, I'll add more images to the Carousel, and I also wrap it in a div element so I can add padding between images.

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>
 //...

Show multiple item

To handle multiple item at once, we'll add 1 more props to our Carousel component, which is show prop, this will be used as indication for the Carousel to show how many item at once. So let's add it to our Carousel props.

Carousel.js

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

Now we need to use the show prop to adjust the CSS of the Carousel children. First we need to modify the div element that have carousel-content class.

Carousel.js

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

And then we also need to modify the CSS. I'm only showing 3 type which the Carousel can show 2, 3, and 4 item at once.

carousel.css

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

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

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

And then we can pass the show props to the Carousel component in our App.js file.

App.js

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

Now we can already see that our Carousel displayed 3 item instead of 1.

BUT, as you can see there is stil a problem when you press the next button, the Carousel didn't show the item correctly or to be more precise it continue to scroll even after reaching the last item.

To fix this issue, we need to change the condition on when the user can press the button and when the button is shown.

Properly handle next button

We need to change some values so the Carousel function act propertly.

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>
 // ...

And that's it!
You can check the final full code on my Github.