Create an ADVANCED JavaScript Image Slider

Add cascading and scaling effects to a boring, basic image slider.

The general idea of what we’re going to do is this:

Create some images, represented by HTML DIVS for now, and display them stacked on top of each other.
We’ll then order the cards first to last.
Offset the cards so that some cards are overlapping one another.
Cascade the cards by fixing the z-axis.
Scale the cards to give a nice look to our slider.

Let’s begin.

Let’s start by creating a container for the cards as well as creating all of those cards.
We’ll create an HTML DIV container and center it in the page.
Then we’ll create 9 HTML DIV children and place them in the container…

Image for post
Image for post

Let’s create a function that will order the cards for us.
We’ll need to capture our images container through the DOM.
We’ll also need to calculate which array index is the middle index in our stack of cards…

any cards with an index less than that number will move to the left
any cards with an index greater than that number will move to the right

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

We’ll want all of the cards to the left of the middle card to be shifted to the right and all of the cards to the right of the middle card to be shifted to the left. We’ll shift the cards by 1/3 or 100px.

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

We’ll just adjust the z-index for the right side of our deck; the left handles itself.

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

Our middle card will stay at a scale of 1, but every card to the left and right will be smaller and smaller as we move out to the ends of the deck.

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

So how do we make this thing move?

The name of the game is this…
All of our cards now have 3 unique properties:
their order in the deck…
their z-index…
their scale…

If we move forwards in the deck(this would be the Next button), we want each card to take the properties of the card before it.
If we move backwards in the deck(this would be the Previous button), we want each card to take the properties of the card following it.

Image for post
Image for post
Note: the animation_in_progress variable is used to prevent the user from spamming the slider buttons

The Previous button functionality just reverses the logic of our next button functionality.

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