Build Advanced React Image Slider Tutorial

Learn how to build an advanced features in slider with React. We will implement auto sliding feature and add animation to the slider. Our React image slider will be implemented without any additional libraries. We will use react hooks approach to create this project. This React image carousel tutorial will help you to understand how any slider works from the beginning to the end.

MOST POPULAR COURSES

SERVICES THAT I'M USING

CONNECT WITH ME!

REFERENCES

TIMESTAMPS
0:00 Introduction
1:53 Auto sliding in React slider
8:12 Sliding animation in React slider

This video is NOT sponsored. Some product links are affiliate links which means if you buy something I'll receive a small commission.

[priyanshmishra]

This was very Helpful, i browsed everywhere but couldn't find the perfect carousel for my project but your tutorial was just what i was looking for, Man Thanks for this Awesome Tutorial 🔥🔥🔥

[alyxson]

I do never comment on yt videos but I had to do it on this one, man thank you a lot, it was the only tutorial I could properly understand

[kamichikora]

Dude you are a monster Thank you so much man... Thank you so much I really don't know how else to show my gratitude... I'm not a particularly smart person... But your videos make things so much simpler and easier for me. Thank you. Really.

[rahilsiddique]

very cool!! I followed your previous video to impliment silder in my project and exactly these two things were missing especially the silder animation, Thanks a lot for your efforts 🚀🚀

[EmpySoul]

Thank you so so much!!!!
You explanation was crystal water! Very helpful.

[jozsefjeges]

Awesome video!
How could I implement touch swiping on mobile?

[yunyang]

The slider is currently set with a 500 fixed width. if we want it to be responsive, do we need to set the width with useState?

[bradleymosuela]

How do I use this slider as my website background?

[ashuinsideout]

how do I stretch the image slider to the full viewport width? Cause I have to enter a pre determined value in parentWidth prop in pixels. How do I make this whole slider dynamic?

[kqdex]

hi. at 6:56, i think it is just easier to set currentIndex and slides as the dependencies of useEffect. if you put gotonext, then you have to wrap it in usecallback just like you did. but gotonext itself depends on currentIndex and slides, which means the useffect depends on them. i tooksome time to think this through.can you confirm?
other than that, nice and simple implementation.
btw one more thing.
i dont really like the idea of having all the images rendered and just transform them left and right along the x axis. the first video with the backgroundImage was nicer.. is there really no other way to implement smooth transition without using a wide-ass div container and render all of them?

[wchorski]

what theme are you using for your editor?

[Adam-nwvy]

Hey man what's the point of learning all these tools and frameworks if ChatGPT is going to replace programmers. I don't really see the point now.

[n.dclothing]

Great Video I've done both, Im just having such a hard time making to responsive 🥲, I've been at it trying over 4H ^^ any chance you can send me in the right direction ?