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.

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.jsReactJS CLASS component.
It’s here that the bulk of the state for the carousel will be handled.

Image for post
Image for post

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.

Image for post
Image for post

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

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

Image for post
Image for post

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

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

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

Let’s get this thing moving.

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

Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post

If you would like a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.

Written by

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