Check out the ADVANCED version of this carousel here.
The general idea of what we’re going to do is this:
We’re going to place an HTML DIV in the center of the screen. We’ll place some cards in the DIV, then fan them out in a circle. When we rotate that center DIV, all of the cards will rotate in a circle.
Let’s begin.
We’ll start by creating that center wheel and placing some cards on the wheel; we won’t center the cards in the wheel…that will come later.
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 sine and cosine 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.
Finally, to get this thing moving, we’ll just attach a ‘wheel’ event listener to our document and increase our ‘theta’(angle) variable by the input of ‘event.wheelDeltaY’…
You can get the source files here.