Build React Image Slider From Scratch Tutorial

[@MonsterlessonsAcademy]

WATCH NEXT: React Interview Questions and Answers - Dominate Your Next Interview - kzbin.info/www/bejne/r4Kro2elpd-ShJIsi=51b2XP_84GH3q6oF

[@mathildedescamps4049]

This is exactly what I was looking for ! Most people use a library for their sliders, so it was pretty hard to find a pure react slider tutorial. Well explained, and simple. Thank you sir ! :)

[@MonsterlessonsAcademy]

Glad I could help!

[@NiceChange]

You created a perfect video for devs, straight forward, easy to understand, easy to watch. Great work. This also made me chuckle because as you demystified the code, it became clear and excited to implement. Thank you.

[@MonsterlessonsAcademy]

Glad to hear that!

[@xPat99]

Perfect thank you so much ! I didn’t want to use any external library and this is exactly what i needed

[@MonsterlessonsAcademy]

Glad it helped!

[@nehanagda8888]

I am making photo album project using react and I was looking for the same thing to show images of my album. Thankyou so much for this video. It is really helpful.

[@MonsterlessonsAcademy]

You are welcome 😊

[@curesnow6493]

I was about to use Bootstrap’s image slider component until I found this video! Thank you for your informative video ! Like and subscribed ❤

[@MonsterlessonsAcademy]

Great to hear!

[@LalitKumar-w7m8j]

literally you're awesome. thank you so much dude

[@MonsterlessonsAcademy]

Happy to help!

[@adria3439]

Thank you for the tutorial, very clear and straight to the point

[@MonsterlessonsAcademy]

You are welcome!

[@turabinamdeger1847]

Thank you so much for the tutorial. This video was very useful for many of my projects. :)

[@MonsterlessonsAcademy]

Glad it was helpful!

[@ak-loz]

Well done. Seriously. THANK YOU for making this simple and to the point.

[@MonsterlessonsAcademy]

Thank you!

[@fedekasas9295]

BROTHER, YOU ARE THE BEST!!! You oooh really helped me!! THANK YOU VERY MUCH!

[@MonsterlessonsAcademy]

Glad I could help!

[@quadee244]

when you’re in the channel rack, click on gms to open up the gms nu, in the light blue screen on the top left look where it says

[@kubataiupov1245]

Great tutorial. Many thanks.

[@MonsterlessonsAcademy]

Glad it was helpful!

[@NNNedlog]

Thanks a lot for this awesome tutorial

[@MonsterlessonsAcademy]

Welcome 😊

[@viniciusm.m.7822]

THANKS, MAN! God bless you! Forte abraço do Brasil!!!

[@MonsterlessonsAcademy]

You are welcome!

[@bidheyakpokharel6386]

with it in a few weeks or months if I pour enough ti and effort into it. I'll be watcNice tutorialng many more of your videos for tips and inspiration.

[@Jeireme]

Thank you, your tutorial is very easy to understand and that's perfect for React beginners like me!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@dankorse]

Unbelievably easy to follow. Great tutorial. Good and clean explanation. Thank you so much

[@MonsterlessonsAcademy]

Glad you enjoyed it!

[@MaximConstantinou]

🙏🏼🙏🏼 my guy saved me like 5 hours

[@MonsterlessonsAcademy]

Thank you!

[@Thelearntosell]

Without you, my soft wouldn't be possible.

[@GidzPaul]

Great job! Neatly explained.

[@MonsterlessonsAcademy]

Glad to hear that

[@_rubenseguravera_3942]

Thanks for your easy to follow explanations, one step at a ti. It makes learning less overwhelming!

[@MonsterlessonsAcademy]

You're very welcome!

[@ujolmaharjan2010]

Brilliant. Simple and easy to understand.

[@MonsterlessonsAcademy]

Glad to hear that!

[@alfredomontoya4087]

Excellent work, very clear and easy to understand. Thank you very much. I will keep watching your channel and will definitely recommend you.

[@MonsterlessonsAcademy]

Thank you so much!

[@matthewchukwu9072]

Thanks Monsterlessons, you did a great monster job here. I'll looking out for you videos.

[@MonsterlessonsAcademy]

Glad to hear that!

[@luiscarlosgarcia7018]

Thank you very much for this tutorial, Great work!

[@MonsterlessonsAcademy]

You're very welcome!

[@ibrokhimkhayitmirzaev6713]

simple but very useful, this was the one of the best videos so far. Thanks)

[@MonsterlessonsAcademy]

Thank you!

[@robbinluo2810]

There are so many best tutorials in Yt. It would be better if we can make the slider slide automatically. That's a more popular feature.

[@ibrokhimkhayitmirzaev6713]

@@robbinluo2810 yeap, but I've build that feature on my own

[@worldbest3097]

great! about to find several slider in react and hard to customize but find solution from scratch!! awesome bro

[@worldbest3097]

going to buy your courses!! thx bro for good contens

[@MonsterlessonsAcademy]

Glad I could help!

[@daurohkmkm6362]

Thank you so much! I can not wait to start setuping. I want to create original soft for comrcials and shows alongside my many other

[@bama2619]

A lesson in one breath, I thought you would be short of air. )) Great job! I spent so much time looking for dotted pagination with arrows. But as soon as I started to look for a slider with pics and arrows, I found your video. Thank you! Well explained. My like and subscription. Keep doing, sir!)

[@MonsterlessonsAcademy]

You're very welcome!

[@dragonhardhd371]

Thank you so much, man, saved me here

[@MonsterlessonsAcademy]

Glad I could help

[@GauChymTo]

TNice tutorials was an amazing tutorial. You are a great teacher

[@-bongodrum-4963]

Great tips!! I'll def check out more of your videos. Just started writing and making soft. I feel soft softs will help get to the next

[@sharkid7399]

TNice tutorials is going in my helpful tutorials playlist.

[@Лемми-ц8ш]

Thank you so much, you just saved me.

[@MonsterlessonsAcademy]

You are welcome!

[@hyunchulsir2362]

Damn! Worked like a charm! Thank you soooo much!

[@MonsterlessonsAcademy]

You are welcome!

[@manubhardwaj2746]

Thank you Sir! TNice tutorials helps alot !

[@A1996ARP2075]

Great really helpful n easy to understand

[@MonsterlessonsAcademy]

Glad you think so!

[@adityaTheExplore]

that's a called step solver! 🤩🤩🤩

[@MonsterlessonsAcademy]

Thank you!

[@LordUzumaki]

Thanks for the tutorial , it's really helpful.

[@MonsterlessonsAcademy]

Glad it was helpful!

[@KirstenM-o8n]

This worked for me im using Create React App. For the image use the same url he uses and just replace the image name with the name of your image. That was the only thing i got confused about

[@MonsterlessonsAcademy]

Awesome!

[@rashabaroudi5485]

Very very very useful thanks a lot

[@MonsterlessonsAcademy]

You are most welcome

[@saudbaig2633]

Thanks this video is very helpful ☺️😊

[@MonsterlessonsAcademy]

Most welcome 😊

[@Monicaslessons-vt7hs]

big thanks its really usefull for me

[@MonsterlessonsAcademy]

Happy to help

[@mohdsahil226]

Thank you so much! Request you to please update this to animation slider so it moves smoothly back and forth

[@MonsterlessonsAcademy]

Hi there is no planned updated to this video but I can recomment you to look on animations in css to implement that.

[@erhahonimafidon9306]

@@MonsterlessonsAcademy Very Nice and concise tutorials

[@byizaboutique4197]

It worked! Tank you sir.

[@MonsterlessonsAcademy]

You're welcome!

[@Envixyfx]

Thanks a lot. TNice tutorials video got started.

[@khaledmv31]

Thank you so much!!! Straight forward

[@MonsterlessonsAcademy]

You are welcome!

[@maharta8458]

Thank you so much brother!

[@MonsterlessonsAcademy]

You're welcome!

[@tuanly2360]

concepts finally line up in my brain and...well, who knows? Maybe I'll be able to make sotNice tutorialng now.

[@patriciaclavero3161]

I took two months to learn Adobe After Effects and Premier Pro. Now I am learning soft soft to make soft so I can have more verity

[@ishashukla2713]

Thanku I was so worried becoz my slider is not working bur after watching your video it becomes simple plz Also make a video to add carousel in slick slider

[@MonsterlessonsAcademy]

Thank you for the idea!

[@vinaydesigner]

Great Video but in my slider next arrow make problem .... after the third slide it is redirect to blank page...i donot know why ... i follow each and every step.

[@hasnainsaeed6579]

thank you soo much for this tutorial, i love your explaination

[@MonsterlessonsAcademy]

You're very welcome!

[@NikhilSingh-sl1cx]

Very helpful content.....Thanks

[@MonsterlessonsAcademy]

My pleasure

[@cobyiv]

Great tutorial , thx

[@MonsterlessonsAcademy]

You're welcome!

[@totalement-food]

thank you so much, great job

[@MonsterlessonsAcademy]

You're welcome!

[@thejahiratwala1059]

THANK YOU SIR, YOU ARE FANTASTIC!!

[@MonsterlessonsAcademy]

You are very welcome!

[@12stem-lamundaoruztomk.92]

Will stay tuned to your channal! Cheers!

[@MonsterlessonsAcademy]

Thank you!

[@dunder9444]

awesome as always

[@MonsterlessonsAcademy]

Thanks again!

[@OwenVassarotto]

Thanks! It is a very good tutorial 👍

[@MonsterlessonsAcademy]

Glad it was helpful!

[@kentdomalaon882]

Thanks, really helped

[@MonsterlessonsAcademy]

Glad to hear!

[@eddyheysen7008]

DUDE, I got so frustrated 'cause of that problem, thanks a lot!

[@MonsterlessonsAcademy]

Glad I could help!

[@alexisfernandez8052]

thank u soo much it helped a lot

[@MonsterlessonsAcademy]

Glad it helped!

[@geocitw]

How to replace url by src ? it is possible ?

[@web3media843]

wow so clear and understandable thanks

[@MonsterlessonsAcademy]

Glad it was helpful!

[@gurkirat7035]

If you're a complete beginner to soft production then soft is imo the easiest daw that you can get, I started off with it.. If you have a little bit

[@ybirdinc]

That was great, thank you!

[@MonsterlessonsAcademy]

You're very welcome!

[@santiagotorres8680]

Thank you for sharing your knowledge :)

[@MonsterlessonsAcademy]

Glad it was helpful!

[@batireeduibatoyun8217]

confused when i downloaded and opened soft soft . I couldnt find any good and informative video for beginners to help

[@sergemoulard2158]

Don’t be afraid, just embrace it.

[@NamNguyen-oz8uj]

Great content again, thank you very much 🎉

[@MonsterlessonsAcademy]

Glad you enjoyed it!

[@sksamassa95]

Thanks from Mali !

[@MonsterlessonsAcademy]

Welcome!

[@pruthvirajpradhan8384]

and i wish you good luck with your future endeavors ❤

[@MonsterlessonsAcademy]

Thank you!

[@arnaudbittler7611]

Perfect thanks !

[@MonsterlessonsAcademy]

You are welcome!

[@gamesstatusglerygames6864]

This is cool it worked thx

[@MonsterlessonsAcademy]

You are welcome!

[@frandylaryea8662]

Thank you very much for this tutorial, but I'd like to know how to make the carousel with imported images

[@michelchaghoury9629]

Great content as always please in the future we need some angular mini projects and ideas please and thank you

[@MonsterlessonsAcademy]

Will do!

[@michelchaghoury9629]

thank you so much this channel is awesome keep going@@MonsterlessonsAcademy

[@leylakanaan3912]

GREATEST ONE EVER !

[@MonsterlessonsAcademy]

Thank you!

[@zezo-ni9lq]

Your so detailed ! SUBBED

[@MonsterlessonsAcademy]

Thanks for the sub!

[@halakharroubi3338]

Thank you sure very helpful

[@MonsterlessonsAcademy]

Thank you!

[@pokerabend1]

Really good content, just one question came to my mind. Why didn't you use a css file and className? I personaly find it more tidy and easier to maintain on the long run if I need to change something from the design perspective.

[@MonsterlessonsAcademy]

Sure. You can use any approach that you like.

[@f4facts271]

Thanks Mike!

[@MbokTiti]

You can't vicariously experience sotNice tutorialng through another person, the sa way you need to try it for yourself before losing hope.

[@ahmedahmedx9600]

This was one of the best tutorials i ever seen !! Thank you very much sir, i just subscribed. One last question, can you tell me which theme you use ? And if its available in vscode ?

[@MonsterlessonsAcademy]

It's gruvbox. Yes it is available also for vscode.

[@jaimeetc5255]

using soft, can't wait to get my hands on it.

[@tsuki_5617]

Thank you very much

[@MonsterlessonsAcademy]

You are welcome!

[@adityanarayankar1471]

Yoo I am not doing well in studies but still I am here

[@manee427]

Nice video. such as This videos will be very helpfull

[@MonsterlessonsAcademy]

Glad you think so!

[@knuckless__]

you are awesome thank you so much! can you give more info about how to use ({slides}) Its like straight props, without keyword props

[@MonsterlessonsAcademy]

You are welcome! slides is just props which we destructure directly in slides variable.

[@knuckless__]

@@MonsterlessonsAcademy THIS MORNING I MANAGED TO DRAW A PICTURE USING THIS METHOD state.flickr_images.length - 1 But the code is not saved and I'm trying all day to figure out how I did it ({STATE}) as a destructuring property now for some reason the image is not rendered no matter what i do Clarification: is the image being rendered here in your application? state.flickr_images.length - 1 Thanks

[@LifeHappy-]

Good video, thanks.

[@MonsterlessonsAcademy]

Glad you liked it!

[@samirandas9823]

nice tutorial

[@MonsterlessonsAcademy]

Thank you! Cheers!

[@mohamedelgzar586]

you are amazing man , but can i make it change photo auto with out click on arrow? and thank you again for this awesome video .

[@MonsterlessonsAcademy]

There is a link in the first comment to the second video which implements this functionality.

[@vivekmbhaskar]

Great content, but can u pls show how to make slides autoplay.

[@vivekmbhaskar]

I tried with setInterval, setTimeout and useEffect, but there are some glitches.

[@MonsterlessonsAcademy]

Hi I didn't try that but useEffect + setInterval should go. Or maybe useRef.

[@vivekmbhaskar]

@@MonsterlessonsAcademy Yeah that works, but if user manually clicks previous or next button, then autoplay won't work properly

[@sushantw834]

Thank you.

[@MonsterlessonsAcademy]

You're welcome!

[@JohnEliezerMYgay]

Thank you! Here's a request from ! Can you please make a tutorial on how to record your actual tutorial and input your own soft

[@MonsterlessonsAcademy]

What do you mean exactly?

[@fullstackprojects5615]

pretty neat!

[@MonsterlessonsAcademy]

Glad you think so!

[@nnamdidanielosuji452]

great tutorial.... Please is there a way for one to add some transition effect to the carousel?

[@MonsterlessonsAcademy]

The advanced features in a slider comes as a new video soon. Stay tuned.

[@MohamedAhmed-tp2qq]

img url didn't render what should i do?

[@haroldpepete]

great video, thanks for share

[@MonsterlessonsAcademy]

Thanks for watching!