Create a ReactJS Horizontal Image Slider From Scratch

The basics in organizing your image gallery in a horizontal carousel.

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

We’re going to create two components.

The first component is going to render a flex box that holds all of our images; it’s also going to have a JSX DIV element that will hide all of the images except the one we want to show the user; this will be our view-port.

The second component is going to render a JSX DIV element that we’ll use to hold a single image.

Let’s begin.

We’ll start by creating a “HorizontalCarousel.jsReactJS CLASS component.
There will be three JSX DIV elements that we’ll render; we’re only concerned with two of them; the third is just a default wrapper.

Our first div will be the flex box with the styles defined in a style object.

Image for post
Image for post

Note:
1. We need a reference to this div so we can manipulate it later.
2. The flex direction is ‘row’.

Our second div will be our view-port.

Image for post
Image for post

Note:
1. We’ll disable the ‘overflow’ attribute so we can see all of our images/cards while we build.
2. The ‘width’ and ‘height’ of our view-port is the ‘width’ and ‘height’ of one image; we need to set it here.

Let’s quickly jump to our ‘Card.js’ component for a moment.

We’ll create a “Card.jsReactJS FUNCTION component.
There will be one JSX DIV element; we can put an image in there later.

Image for post
Image for post

Note:
The dimensions of the card are the exact same dimensions as our view-port from above.

Let’s jump back to our ‘HorizontalCarousel.js’ component and add some Cards.

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

Now, to set ourselves up for success — meaning an image slider that can go infinitely left or right — we need to clone the first and last cards then,

put a copy of the first card at the end of our slider
and a copy of the last card at the beginning of our slider

We’ll do this in the ‘componentDidMount()’ life cycle of our “HorizontalCarousel.js” component.

Image for post
Image for post

Note:
Since we’ve now added two repeated cards in our slider, the main card we want to focus on is shifted off by 1; we need to re-shift it back to the original first card, so we translate the entire flex box left by the width of one card (350px).

Let’s move on to moving this slider.

We’ll create two buttons, Next and Previous, and we’ll need a way to keep track of which card the user is on.

All we need to do is translate our slider left or right (depending on the button pressed):

the width of a card (350px) * the card number in our slider

Image for post
Image for post

Note:
The ‘if’ conditional makes sure the user can’t slide past the beginning or end of our slider.

Second to last, we implement logic to make our slider scroll back to the beginning or back to the end depending on if the user goes all the way to the right or left…

Image for post
Image for post

Note:
We have a timeout set to ~502 milliseconds, this give our slider enough time to move to a card before we move the slider back to the beginning or end automatically.

Lastly, we’ll just add some images into our “Card.js” component.
We’ll pass some random images from our “HorizontalCarousel.js” to the “Card.js”

Image for post
Image for post
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.

Build a ReactJS Image Slider From Scratch

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