Well, this is my first ever article/tutorial on this virtual world, right now, I'm hitting two letters and four backspaces 😋
Before I begin to write anything about the topic, I want to thank all those (I don’t know whom should I thank first😁, I have visited lots of sites and read more than dozen of posts to complete it, I don’t even remember their names 😜 — Thanks all).
Now, let’s get back to work.
First, Create a new React JS project using npx create-react-app react-carousel and cd into the project directory i.e. cd react-carousel . Open your favourite code editor/IDE (I’m using VSCode Editor).
In this project we’ll be using local as well as network asset images. So, let’s start creating two directories/folders inside src directory.
1. src/assets
2. src/components
Inside src/assets directory import some images from your pc (I have imported First.jpg, Second.jpg).
Next, we’ll create all the necessary files inside src/components directory.
1. src/components/Arrows.js
2. src/components/Dots.js
3. src/components/Slider.js
4. src/components/SliderContent.js
5. src/components/sliderImage.js
6. src/components/slider.css
Create a list of Title, Description and ImageURL which will be shown dynamically in our carousel component later. We’re creating this list data in a different file so that we can separate the logic and data. In case we want to add more slider images in our carousel, we can do such just by updating this file without breaking the code.
sliderImage.js
After creating the list of carousel data, now we will create our components…
Arrows.js
These arrows will be added to the left and right edge of the carousel slider container, which will act as a clickable previous & next button. To make these arrows functional onClick() method is applied by changing the index of slide (using prevSlide & nextSlide). Along with these left and right arrow buttons, our carousel will have other clickable buttons (i.e. large dots) on the bottom of slide.
Dots.js
In Dots.js, all sliderImages are listed using JavaScript map() function, number of dots depends on the list length (i.e. total number of slider images). In this case we have to get the activeIndex to distinguish active and inactive dots, then onclick() callback function will pass the clicked index to change the slide randomly. If you’re wondering why the hell I’m using two onClick() & onclick() method, then it’s because of the react architecture. One is to handle the onPress()/onClick() event and another for callback (we cannot change the index here so we have to lift the state up (i.e. in parent component, where we handle the activeIndex)).
Now, It’s time to show our image, title and the description of our carousel, SliderContent.js will do the job…
SliderContent.js
In SliderContent component, we will render the attributes of sliderImage (i.e title, descriprion and image). The final Component responsible for holding all the above components as well as handling all the methods is Slider.js , two hooks useState() & useEffect() are used to change the state of sliderImage (i.e active or inactive) & to apply the effect, using useEffect() we’ll change the slide automatically in a certain interval (i.e. 5 Seconds) of time.
Slider.js
Finally we completed our components logic, now it’s to beautify our carousel using custom CSS styling. CSS helps us to separate the active and inactive slide by applying colour and hiding the overflow(i.e. inactive SliderContent) content.
slider.css
If you enjoy watching videos more than reading documents then I’ve uploaded this video on YouTube as well.