How to Build a Simple Carousel in React
In a recent project, I needed to implement a carousel to showcase some offered services.
The problem was, I did not want to use a whole UI library just for a single component.
The solution?
Make a simple carousel on my own, to suit my project needs.
Investigate the logic, HTML and CSS first
How would you break down a carousel, at a logical level, while also trying to imagine what exactly happens? A carousel is nothing more than several items being rendered in a parent container block — carousel-container, with the child — carousel-item — arranged horizontally. Isn’t that right?
With the basic carousel structured, it was time to bring in the might of CSS and make it look pretty(ish). The carousel class sets the bound for the parent while the .carousel-item sets the styling for the items that will be shown inside the carousel. I used the transition attribute just to make the carousel motion a little less boring.
Bringing in the motion
Now that the component is done statically, it was time to move on to making it do what it is supposed to do. There are two ways that I could’ve made this component — have a Next and Prev button on either side of the carousel block to manually change the item, or make it to keep changing tiles on a loop. I went for the second option.
For the purpose of testing this component, I declared an array of strings — const data = [“1”, “2”, “3”, “4”]. These will be my carousel items. Next up was using state to manage index of my carousel item. For that I declared the following with default state as 0: const [currentIndex, setCurrentIndex] = useState(0).
If I was to get item from my data array for currentIndex, I would’ve got “1”. All that remained now was to keep increasing the currentIndex value until it reached data.length — 1, then reset it back to 0, and repeat.
To deal with currentIndex, I made a function what would run at an interval of 3 seconds (which is what will determine how long is a carousel item visible before it moves on to the next one) and called it inside useEffect().
One thing to keep in mind while using useEffect() is dealing with the side-effect. Since there is a subscription, we must also write a clean-up function that will take care of the side effect once the component unmounts.
Final assembly
With the carousel-item and carousel-container ready, it was time to finally assemble the pieces together, to make it a carousel. Since the dummy data that I was using, it was simple to render it on the screen using the array.map() method.
Below is the finally put together component which did what I wanted it to be; be a simple carousel to display whatever I wanted to display. The h1 tags could easily be changes to a component, an image, anything. All that will be needed then is changes in the corresponding css and you’ll be good to go.
This is how I made a carousel. There can surely be other ways, better ways, to make a carousel but this is as easy as it gets.
💡 Note: If you find yourself building similar carousels over and over, it might be a good idea to isolate and extract this component into packages, so you can use an open-source toolchain like Bit to publish, version, and reuse it across all of your projects with a simple
npm i @bit/your-username/YourCarousel.
Learn more here:
Hope you liked this small step-by-step React component building. I surely enjoyed it while I was working on it.
Thanks for reading.
Build React Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
