Hey everyone!
For this post, I decided to work with something I'm currently passionate about, React.
Recently, I'm having the opportunity to work a lot with React and as its advantages become clearer to me, I'm more and more willing to dive into this path of learning to build user interfaces powered with the library.
As you may know, React is a JavaScript library with which you can build complex interactive UIs following a component-based approach. It uses techniques and concepts that focus on making the interaction with the interface a more efficient task. By using a concept called virtual Dom, which is a lightweight representation of the real DOM, React makes interaction with the interface a really fast task, since for every change it compares the virtual DOM to the real DOM and updates only the portion that has changed.
Alright, so that is only one of the reasons why React is much more powerful than other libraries when you use it to build UIs. As in this post I'll focus on a real example of using React, you can look at the documentation if you find yourself lost while reading the code or if you don't know any concepts mentioned here.
Component-based thinking
One of the first things to do when you start creating a UI, is to think about it as a set of components that will wrap parts of your interface and then work together to create a good user experience, that is one of the things React does to you, it changes the way you organize your apps.
If you look at the header image for this post you'll get the idea of what we are going to build here. It looks really simple, right? And it, in fact, can be simple since we are using React :)
You should be aware that there are tons of ways of doing an image carousel in React, regarding the way you organize components and even how many components you create. For this example I decided to create three basic components, the first, the Carousel
component, will be the wrapper for the entire layout and logic, the second, ImageSlide
component, will simply render the image slides for the carousel, and the third will be the Arrow
component, which will act as both the right and left arrows for the carousel transition. So, with that, you will have an instance of the ImageSlide
for each image you give as the input for the carousel and two instances of the Arrow
component, one for each arrow.
First things first, let's build the Carousel
component.
The Carousel
component
Before anything, you have to tell React in which part of your HTML file you want it to render your component.
In your HTML file, add this:
<div id="container">
<!-- Your component will be rendered here. -->
</div>
In your JavaScript file, enter this:
ReactDOM.render(
<Carousel />,
document.getElementById('container')
);
As you see, we are binding the div container to the Carousel component, so React will use that placeholder to render your entire component.
Notice that you have to have the React
and ReactDOM
libraries available for you in your script. If you are trying this out in some sort of Code Playground such as CodePen or JsFiddle you can simply add the relevant scripts in the settings section. However, if you have a setup for React development on your local machine you probably know what to do :)
Now it's time to set up our Carousel
component.
class Carousel extends React.Component {
render () {
return (
<div className="carousel"></div>
);
}
}
Here we are creating a simple wrapper class that will be responsible to handle all the logic you'll have in your interface. The render method of this class will be responsible to return the markup for your entire layout, so we'll add all the other components to the div
block being returned.
You should notice that here we are extending the React.Component
class in order to declare that this specific class is going to be a React component. It is important to point that this is the ES6 equivalent of the React.createClass
method. The former is just a "syntactic sugar" provided in the ES6 set of features. With that, you'll have several differences while implementing your component methods. Check this well written post by Todd Motto to see the details of each option.
As we already have the setup for the Carousel
class, we should start looking at what we are going to render inside of it.
The ImageSlide
component
This is going to be a really simple component, with no logic attached to it. This is a common pattern while building components in React and these types are known as stateless
or functional
components. The reason for that is due to the inexistence of a logic to control the state of those components, since they do not have a declared state. They end up being simply JavaScript functions that receive parameters (or not) and return a markup built based upon those input values (or not).
Let's see what the ImageSlide
component looks like.
const ImageSlide = ({ url }) => {
const styles = {
backgroundImage: `url(${url})`,
backgroundSize: 'cover',
backgroundPosition: 'center'
};
return (
<div className="image-slide" style={styles}></div>
);
}
You can see that there is not much to do with this component. It should basically receive the image URL and create the required markup so it will act as one of the slides in our carousel.
ImageSlide
is a function that receives a String, which is the image URL, creates an object that will describe how the component should be styled and returns the markup filled with the info we provided. As mentioned, you will have one instance of this component for each URL you provide in the array of images.
Regarding the style of this component, you can see that the image is being set as its background. However, it is up to you to style your component as you want, it won't affect the purpose of this post.
So after creating the markup for the image slides, we should add it to the render method in the Carousel
component.
class Carousel extends React.Component {
render () {
return (
<div className="carousel">
<ImageSlide url={ imgUrl } />
</div>
);
}
}
The URL is passed to the ImageSlide
component as a property in the props
object. Later in this post, we'll see how to properly get the image URL form the array of images used as a reference.
The Arrow
component
const Arrow = ({ direction, clickFunction, glyph }) => (
<div
className={ `slide-arrow ${direction}` }
onClick={ clickFunction }>
{ glyph }
</div>
);
This component is even simpler since we don't have to setup anything before returning its markup. I decided to use three properties here because this component is being used both for the left arrow and the right one. Due to that, its implementation should be a little more generic. The direction
property will tell the component which class to use for each instance (left
or right
). The clickFunction
describes what should happen when each arrow is clicked and finally the glyph
component refers to what will be the content of this component, that means what will be rendered.
With that, let's add both arrows to the Carousel
component.
class Carousel extends React.Component {
render () {
return (
<div className="carousel">
<Arrow
direction="left"
clickFunction={ this.previousSlide }
glyph="◀" />
<ImageSlide url={ imgUrl } />
<Arrow
direction="right"
clickFunction={ this.nextSlide }
glyph="▶" />
</div>
);
}
}
From here we can have a better idea of the final markup we'll have for our carousel.
Next, we should go back to the Carousel
component since there are still several things to finish.
You notice that we are passing two different functions to the Arrow
s components. Those are responsible for handling the transition of slides. But how do they do that?
First, we should look at the states we need to create in order to tell the wrapper component which image it should render at each time. So, let's set up the constructor
function so we can create the initial state for the Carousel
component.
class Carousel extends React.Component {
constructor (props) {
super(props);
this.state = {
currentImageIndex: 0
};
}
render () {...}
}
The first thing to do within the constructor
function is to call super()
passing it the props as a parameter, in case you want to access properties through the this
keyword within this context. For now, it is optional to send the props
object since we are not using props within the constructor.
Initially, we are setting a state called currentImageIndex
set to 0
. This is going to hold the current index for the image that has to be rendered on the screen at each time. Here we are starting from the first image in the images array.
This state is going to be used to get the correct URL passed to the ImageSlide
component. Let's check how to do that.
class Carousel extends React.Component {
constructor (props) {...}
render () {
return (
<div className="carousel">
<Arrow .../>
<ImageSlide url={ imgUrls[this.state.currentImageIndex] } />
<Arrow .../>
</div>
);
}
}
After this, all we have to do is to tell the component how to update that state according to user interaction. That work is related to our Arrow
components, and since we are already passing two functions (previousSlide
and nextSlide
) as properties, we now have to implement them.
You will notice that these two functions are analogous. All they do is to update the currentImageIndex
state by one, either by adding or removing from it. There is only one detail to point here. There will be situations in which we will have to reset the value for the current index since it will at some point reach the maximum or the minimum index for the array of images. Therefore, it is important to check the length of the array in order to know whether we should reset the index or not.
class Carousel extends React.Component {
constructor (props) {...}
previousSlide () {
const lastIndex = imgUrls.length - 1;
const { currentImageIndex } = this.state;
const shouldResetIndex = currentImageIndex === 0;
const index = shouldResetIndex ? lastIndex : currentImageIndex - 1;
this.setState({
currentImageIndex: index
});
}
nextSlide () {
const lastIndex = imgUrls.length - 1;
const { currentImageIndex } = this.state;
const shouldResetIndex = currentImageIndex === lastIndex;
const index = shouldResetIndex ? 0 : currentImageIndex + 1;
this.setState({
currentImageIndex: index
});
}
render () {...}
}
For the previousSlide
function you can notice that the reset condition is set to be the case in which the currentImageIndex
state is 0
, which means that if the index is pointing to the first image in the array and then the user clicks the left arrow, the index should then point to the last image in the array (imgUrls.length - 1
).
The nextSlide
does quite the same, the difference is that if the index is currently pointing at the last image, then it should be reset to point at the first (index = 0
).
In all the remaining situations both methods simply change the mentioned state by one in order to get the previous or next image.
At last, there is one important thing to notice here. In order to update states in a React component, we have to use the setState
method. This method is responsible for telling React that it should update that component and its children. This is the primary way of updating your user interface.
Therefore, whenever you click on the left or right arrow, you are basically updating the state of the currentImageIndex
and consequently updating your interface with the new image slide.
However, in order to access the this
keyword within those two functions, you have to properly bind the context to them. A common way to do that is in the component's constructor
method.
class Carousel extends React.Component {
constructor (props) {
...
this.nextSlide = this.nextSlide.bind(this);
this.previousSlide = this.previousSlide.bind(this);
}
previousSlide () {...}
nextSlide () {...}
render () {...}
}
Finally, we have implemented all the logic for our carousel component. You can take a look at the working demo and the full version of the code in this codepen.
PS1.: as it was not the purpose of the post, I omitted the styles used for the components, thus if you are interested in that you should take a look at the codepen mentioned above.
PS2.: I still want to add some animation to the slides transition, but I want to do it properly in the React way, so that will probably be a new post :)
Thanks for reading, folks!
Top comments (17)
I can't thank you enough man! This is exactly what I needed. keep 'em coming!
Glad you liked :) now I'm thinking about making a more complex carousel, with animation and stuff π
oh, you should! I will be sure to be checking back to your channel for any update. And also try making it a bit more generic if possible, whereby dom nodes could be passed to the sliders instead of images or URLs.
Great idea! With that the carousel itself could be used for a few other things like a presentation, for instance. Will definitely consider that, thanks.
Yeah, because I actually used your logic but then passed objects into the slider to create a testimony carousel. Speaking of animations and modification, can you please guide me on how to make the carousel loop itself? I was thinking of using the setTimeout function inside the useEffect hook which will be invoking the nextSlider function after a certain interval. What are your thoughts on this? Thanks again for taking the reusability thing into consideration.
Hello mujeex,
So, considering that useEffect should be the equivalent of componentDidMount, that is sort of how I would approach the scenario you described. The only difference is that in my opinion it makes sense to continuously loop the carousel, so setInterval would make more sense than setTimeout (which would trigger only once after the component mounts).
Also, make sure that you clear up after yourself, meaning that when you set an interval after mounting a component you better clear that before the component unmounts :)
Amazing! It worked like a charm. Thanks a lot, Will. I am really looking forward to your reusable carousel.
Great Article, After developing this image carousel can we further create as mentioned in the image attached after clicking on any image in carousel?
Please let me know how can we achieve that.
Thank you
Hi Will,
I am super new to this and am having some issues getting my carousel going :o When I try and run my website I get an alert saying imageUrls are not defined.
I did try some stuff to fix this but no dice :( Any chance you have some advice on how to get around this issue?
It will be a good idea to add thumbnails of the images below the carousel where the user can click and also be touch friendly for mobile devices, I mean to support swipe instead of the buttons. Great article!
thank you , that is interesting
I appreciate this post, and I look forward to the more complex one.
@willamesoares any update on the advanced carousel?
Thanks for sharing bro, very helpful!
Hi nice work......how can i put 4 img in every one carousel?
Will Soares, you are literally soaring with your code.