Create a Basic ReactJS Image Wheel Carousel

4 min readAug 8, 2020

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.

The first component is going to render a JSX DIV element in the center of the screen that we’ll use as the center of our wheel.

The second component is going to render a JSX DIV element that we’ll use to hold a single image.

When we rotate that center DIV, all of the cards will rotate in a circle.

Let’s begin.

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

Note:

1. We can control how far out the images position themselves from the center using ‘radius’.

2. We keep track of the degree to which the wheel is rotated with two variables — theta and temp_theta — one in the state, and one simply in the constructor that we use as an intermediary.

3. We keep all of the cards/images in a ‘cards’ array.

To complete the setup of our “Wheel.js”, we’ll render one JSX DIV element.

Note:
We need a reference to this div so we can manipulate it later.

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

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

Note:
We’ve given the card/image an arbitrary ‘height’, ‘width’, and ‘backgroundColor’. We can change this later when we insert an image.

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

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

Note:
1. We calculate the center of our “Wheel.js” and pass that, the ‘radius’, and ‘radian_interval’ state variables.

2. The ‘key’ prop isn’t required, but strongly advised (else you will receive a runtime warning).

Now comes the hard stuff.

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

We’re going use the cosine and sine functions to calculate the x and y positions of each card.

We do this by taking the angle — we’ll move in 45 degree increments — of where the card is supposed to be.

Using sine to calculate the y coordinate.
Using cosine to calculate the x coordinate.

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

Note:
1. I’ve just extrapolated the calculation of the ‘x’ and ‘y’ coordinates to a function. This isn’t needed.

2. We include the center of our wheel in the positioning of our card. It may be zero, but we code in for the case where it might not be.

Let’s get this thing moving.

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

Note:
1. We scroll the wheel by using ‘event.deltaY’; we multiply by 0.5 to slow it down.

2. We keep track of where the wheel has scrolled AFTER the wheel has finished scrolling.
We accomplish this by setting a timeout function, keeping track of that function with a variable ‘this.anim_id’ (which I’ve added to the constructor, NOT THE STATE), and clearing that timeout until the last spin of the wheel.