The Startup
Published in

The Startup

Create a Spinning Wheel Image Carousel Using JavaScript

Add some front-end variety to your JavaScript image galleries.

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’…

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

(HTML/CSS) Create a Spinning Image Carousel (Web Development)

--

--

--

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +756K followers.

Recommended from Medium

Data Structures in Real Life

>_ Create High Availability Architecture using AWS CLI by Intregrating Apache Web Server, EBS, S3…

Trends Come And Go, But JavaScript Is Forever

Longest Substring Without Repeating Characters

Serverless AppSync Plugin: Top 10 New Features

A guide to automating HashiCorp Vault #3: Authenticating with an IAM user or role

How to Use Agile for a More Effective SDLC and Lower Risk

FINAL REMINDER

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
An Object Is A

An Object Is A

Learning to code…

More from Medium

Going Beyond React, The Beauty of Vue

React Vs Angular: Yet Another Opinion

Create a JavaScript project from SCRATCH

Learn How to Make Colorful Fireworks in JavaScript

Learn How to Make Colorful Fireworks in JavaScript