Create an ADVANCED JavaScript Image Slider

3 min readJul 30, 2020

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…

Ordering the cards.

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

Offsetting the cards.

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.

Cascading the cards.

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

Scaling the cards.

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.

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.