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.js” ReactJS 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.
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.
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.js” ReactJS FUNCTION component.
There will be one JSX DIV element; we can put an image in there later.
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.
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.
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
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…
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”…
If you would like a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.
