Build ReactJS Carousel -Part1

My journey with react started more then a year back. I was already doing some web-development with HTML, CSS , Javascript for past 7 years. Then completed the Freecodecamp frontend certification also. React came like this cool kid in frontend development, which was a must then. So, i jumped into it and purchased “Modern React with Redux” from Stephen Grider and learned a lot from it. Also, learned a lot from React for beginners by Wes Bos. I highly recommend both and this article is based on what i learned from both and my past 9 months a React developer for my company.

In React we have to divide our project as small components. Then write those components and stick it into the main App component. We are making a Youtube player app in react. So, we design the layout and create components for different parts.

We are going to build a carousel by using ReactJS.
This carousel I have developed while doing a react project. I tried to
make it simple and also gave multiple options so that can be customize
according to our requirement.

I will explain this tutorial using create react app so that we can save time for the environment setup. We can find create react app setup here.

Assuming that we are successful to install create react app I will add my
carousel in app.js. We can clear predefined files from create react app
application.

We need to add Carousel tag with all the property options. All the options will explain with developing steps. This carousel currently have two view options “fullScreen” and “grid”.Which will look like below images.

Here is the final code for the carousel.

First create a separate folder for carousel named Carousel inside src
folder and add two files index.js, carousel.scss below is the screenshot

Create a basic component like my code

Import Carousel from “./carousel/index” in App.js.
The idea is carousel will display content passing from parent component so we need to display props.children in carousel let’s see that.
In app.js file I added Carousel like this

We will takes slides from parent component and props.children

But this will not display the carousel we need to add functionality and css.
I have added a wrapper around each slides passed from parent so that can control the width and height of slides.

Some useful state and events I declare that I will explain later one by one.

I have given some options to control display and functionality from parent components as props they are :

1. autoScroll={false} (enable disable autoscroll)
2. showArrowBg={true} enable arrowbox (may be this option we can replace)
3. sliderType=”grid” (type of slide fullscreen or grid to control the slider)
4. classes=”” To add class

Here is our rendering part based on props and state controlling to display arrow. If there is no slide to scroll hiding the right arrow and for first slide left arrow will be disable.

Pause timer on mouse enter the and add refs so that we can use the container width whenever required. We need to get the width of the container to calculate the animation distance. I have use the carousel-inner-container which is use as the container of the slides. As I am using the width of the carousel inner container, added refs to that. It is a good practice to use ref in react instead of using native javascript selectors.

The last part is slides or carousel-item.
Now will discuss the functionality and the css in next part.