How to Show Multiple Item in Simple React Carousel

reactcarouseljavascriptcss

by Demaspira Aulia at 12 January 2021

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>
 //...
Enter fullscreen mode Exit fullscreen mode

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
 //...
Enter fullscreen mode Exit fullscreen mode

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>
 //...
Enter fullscreen mode Exit fullscreen mode

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);
}
/* ... */
Enter fullscreen mode Exit fullscreen mode

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

App.js

 // ...
- <Carousel>
+ <Carousel
+     show={3}
+ >
 // ...
Enter fullscreen mode Exit fullscreen mode

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

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>
 // ...
Enter fullscreen mode Exit fullscreen mode

2

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