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.

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.

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.

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

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.

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.

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

Build a ReactJS Image Slider From Scratch

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