How to Create a ReactJS ADVANCED Wheel Carousel

This tutorial builds off of a previous tutorial I did on creating a basic spinning wheel image carousel. Create a ReactJS ADVANCED Wheel Carousel. Give more life to a basic spinning image gallery.

Give more life to a basic spinning image gallery.

This tutorial builds off of a previous tutorial I did on creating a basic spinning wheel image carousel. Check that out here before moving on:

Or check out the video tutorial here:

We have two abilities to add to our wheel:

1. Make sure the images don’t appear upside down when we rotate the wheel.
2. Establish a snapping point; when we finish rotating the wheel, the wheel will automatically rotate to the card closest to that snapping point.

Let’s begin.

We’ll start by balancing the images so they don’t appear upside down. This is simple, we’ll just rotate the images in the opposite direction that we rotate the wheel…

Wheel.js

Note:

1. We’ve converted the units that spin the wheel from radians to degrees by dividing ‘event.deltaY’ by 360.

2. We’ve added ‘transitionDelay’ and ‘transitionDuration’ attributes to the wheel.

Now, before we get to writing that snapping point function, we need to setup two things:

1. We need some way of knowing when all of our images have loaded into the page; if not, the user could technically scroll the wheel before our gallery loads and this would break our code.
2. We need some way of preventing the user from spinning the wheel while our snapping point function is running.

To solve problem one, we’ll create a function that allows a counter in our “Wheel.js” component to increase, then pass that function to each “Card.js” component.

When a card/image mounts (‘componentDidMount()’ life cycle) it will execute that function.

Wheel.js

To solve problem two, we already have a mechanism that tells us when our wheel has stopped spinning, the ‘setTimeout’.’

We know that we want to call our ‘snap back’ function after the wheel stops, so we’ll track the ‘snap_in_progress’ variable using the state; and in our ‘onWheel’ listener we’ll just test that there isn’t a “snap in progress” and that all of our cards haveloaded.

Wheel.js

Note:

We call the ‘snap_back()’ function after our wheel has stopped spinning. We’ll write this function later.

On to that snapping function…

We need to calculate** three things**:

1. The angle that the snapping point falls on.
2. The closest card or image to that snapping point once our wheel stops spinning.
3. The angle difference between the snapping point and that closest card.

All of this requires some Trigonometry.

1.

We’ll calculate the angle of the snapping point, by taking the X and Y coordinates of any card/image and feed it into an inverse tan function.

Using the inverse tan function to find the angle.

Wheel.js

Note:

1. We add the ‘snap_point’ to our state.

2. In the ‘children_loaded()’ function, we establish the ‘X’ and ‘Y’ coordinates of our snapping point once all cards have loaded.

3. We calculate the angle of our snapping point in the ‘snap_back()’ function.

2.

To determine the closest card to our snapping point, we’ll compare the distance from the snapping point to all the other cards/images and we’ll choose the distance with the lowest value.

Pythagorean Theorem applied.

Note:

We use the *Pythagorean Theorem *to calculate the distance between snapping points and cards.

Wheel.js

Note:

1. We start by choosing any card to be the shortest distance, doesn’t matter which; we need to start with something.

2. We then loop through all of the cards, including the one we picked (doesn’t matter), we calculate and compare distances to find the lowest number.

3.

To get the difference in angles between our snapping point and closest card, we’ll calculate the angle of our closest card using the** inverse tan **function (like earlier), and we’ll just take the difference between the two.

Wheel.js

Finally, we’ll spin the wheel and images(in the opposite direction) using the ‘theta_between’ angle we’ve calculated…

Wheel.js

Note:

1. The ‘if’ conditional tree makes sure the wheel is rotating in the correct direction based on which QUADRANT the snapping point and image fall in. For more information on this, check out my video tutorial; link down below.

2. Remember to change the ‘snap_in_progress’ to false and keep track of how much the wheel spun with ‘theta’.

Let’s quickly jump to our ‘Card.js’ and update some code.

All we really need to do is convert this FUNCTION component into a CLASS component and remember to call that ‘amloaded()’ function in the ‘componentDidMount()’ life cycle function.

Card.js

Note:

Easily change the JSX DIV element in the render function to a JSX IMG element.

ReactJS ADVANCED Wheel Image Gallery

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

UPGRADE to an ADVANCED ReactJS Image Wheel Carousel (2020 Web Design)

Originally published on Medium

web-development reactjs web-design

Get Best out from Web Design and Development Services from Vinew Technologies,We have a dedicated team of experienced and knowledgeable web developers, designers and testers. Therefore, we have proficiency in analyzing, developing and designing the necessity of intricate Website Development projects.

ReactJS Development Company in Chicago, USA with experienced and tailored ReactJS Developers at Cerdonis Technologies, LLC. Hire ReactJS Developers on Hourly & Full-time Basis Near Me.

Web development is a dynamic field. With the emergence of new technologies each year, we can observe web development trends changing to a greater or lesser extent. In 2020 too, new technologies have emerged and

We are Your Design Guys... But we do much more than just web design: Custom Website Design, Website Redesign, Website Development, Online Marketing, PPC, SEO, SEM, Hosting & Webmaster Services. Get a custom web design that's not just beautiful, it's written and designed to bring in more business.

Ellocent stands as a highly reputed and top Web development company with impeccable services due to resource-rich advanced tools and techniques.