Create a Basic ReactJS Image Wheel Carousel

Shake up your image gallery designs…

The general idea of what we’re going to do is this:

We’re going to create two components.

Let’s begin.

We’ll start by creating a “Wheel.jsReactJS CLASS component.
It’s here that the bulk of the state for the carousel will be handled.

Let’s quickly jump to our ‘Card.js’ component for a moment.

We’ll create a “Card.jsReactJS FUNCTION component.
There will be one JSX DIV element; we can put an image in there later.

Let’s jump back to our ‘Wheel.js’ component and add some Cards.

We’ll do this in the ‘componentDidMount()’ life cycle function.

Now comes the hard stuff.

How are we going to re-position the cards to display around our wheel? A bit of Trigonometry.

Using sine to calculate the y coordinate.

Using cosine to calculate the x coordinate.

We’ll handle this in the “Card.js” component.

Let’s get this thing moving.

We’ll just attach an ‘onWheel’ event listener to our JSX DIV in our “Wheel.js” component.

Lastly, let’s add some images to our carousel.

Build a ReactJS Circular Image Carousel From Scratch (Web Design) (2020)

Learning to code…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store