Create a ReactJS ADVANCED Wheel Carousel
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:
- Make sure the images don’t appear upside down when we rotate the wheel.
- 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…
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:
- 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.
- 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.
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.
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:
- The angle that the snapping point falls on.
- The closest card or image to that snapping point once our wheel stops spinning.
- 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.
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.
Note:
We use the Pythagorean Theorem to calculate the distance between snapping points and cards.
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.
Finally, we’ll spin the wheel and images(in the opposite direction) using the ‘theta_between’ angle we’ve calculated…
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.
Note:
Easily change the JSX DIV element in the render function to a JSX IMG element.
You can find the source files here.
If you would like a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.
