React JS Carousel | Create a Wonderful Autoplay Carousel From Scratch

In this tutorial, we're going to create a React JS Carousel using only react hooks. I will show you how to build the carousel the way you want.
💻 WANNA CHECK THE CODE?
github.com/JohanAlves/yt-reac...
⚡ FOLLOW ME:
Instagram: / johanvaf
LinkedIn: / johan-alves-653053ba
🕐 TIMESTAMPS:
00:00 - Introduction
00:42 - Create React App
03:01 - Preparing the Data
09:33 - Creating the Carousel
12:33 - Styling Carousel
18:57 - Implementing the Logic
22:37 - Creating Arrows Control
30:51 - Adding the Dots
36:00 - Adding Autoplay
41:08 - Like & Subscribe :)
💰 SUPPORT THE CHANNEL:
React JS Carousel | Create a Wonderful Carousel From Scratch
In the world of websites, using a carousel is a practical way of displaying multiple images or content in a small space. It helps save screen space and encourages visitors to focus on important website content and improves the overall visual appeal.
But creating a React JS Carousel is not as simple as it looks. Doing this from zero, the developer needs to worry about responsiveness, controls, pagination, autoplay, animations, etc... That's why, in this video, I'm going to show you how to implement this step-by-step functionality in your website.
Thank you for all the love ❤
#reactjs #carouseljs

[@keldrogo175]

That's an INCREDIBLE guide !! thank you SO much !

[@jundavewamar5485]

Thankss! it was a very great and easy-to-understand tutorial! please upload more about react js. it was very helpful for newbies like me

[@iosefpineda]

Awsome! you don't know how you helped me with this exercise, you earned a sub! 👏👏👏👏

[@antonzhevchenko8489]

Your video is perfect, good explanation. Very clear and simply to understand, thanks a lot.

[@murrmax1466]

You're absolutely good!!! Thank you!!! ❤

[@mondayuche8111]

you are a life saver, God bless you.

[@elisosaladze4725]

thank you!! this was really helpful

[@rahadulhaq6387]

Thank you so much brother it was very very very helpful

[@VinodhK1992vk44]

Amazing video!

[@rootinsanity5303]

Thank you so much!!!

[@muaazkhan6156]

Such a great video 🥰🥰🥰

[@fraternidadeaustriaca2625]

THANKS A LOT!!! You teach very well, learned a lot here!

[@johanalves1663]

Thank you for the feedback. I'm glad I could help

[@amirzakipour2235]

Thank you !

[@carlosdaniellamasbarcenas7244]

Dude, you are a genius! Un abrazo desde Argentina (a hug from Argentina)

[@johanalves1663]

Hello Carlos. Muchas Gracias!

[@jamesgriesedieck5116]

any idea why in the last part when Im trying to set up the useEffect its telling me "type false | Timeout is not assignable to type 'null'" ? I am trying to implement the autoplay feature into a carousel I set up from another video so its a bit convoluted and I cant get it set up right... thanks!!

[@theonlying_]

Please my images are not showing

[@EmonicVampire]

hei great tutorial. everything works fine but i guess i miss something. after i apply the autoplay looks like the timer is overlaping when i click on the dot. it run multiple timer. the original timer + timer of every click on the dot. what do i miss?

[@johanalves1663]

Thank you. Please check if the dots are inside of the container that is cleaning the timer onMouseEnter. Everytime you put the mouse on the dot, it suppose to clean the timer automatically

[@EmonicVampire]

@@johanalves1663 ty for responding. I have solved it already. I was need to clear the timer before sliding to next index on the dot clicked. So it will clear previous timer and run a new timer.

[@MorganBlack1412]

I'm not good even for copying, fuck xD