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 ! :)
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.
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.
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.
finally someone who just shows how to make a slider without having to install a third party library, I find devs have become so lazy lately, installing libraries for every single new feature is such a bad practice in my opinion. Thanks for this tutorial
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
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.
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
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 ?
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!)
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 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
Great video! I only want to ask, is there a way (without removing the arrows and goToNext or goToPrevious functionalities) to include a functionality for an automatic slider, so that each image can be shown for, lets say, 2 seconds and then it automatically changes to the next one? And if that can be done, in a way it suits you based on how you have built the whole thing, could you pls make an updated video for that?
Great tutorial! Really helped me create a slider from scratch! However, how do you make the dots active, so that the user knows which image they clicked on? For example, the dot that they click on turns red from black?
WATCH NEXT: React Interview Questions and Answers - Dominate Your Next Interview - th-cam.com/video/yQHr4opz_N0/w-d-xo.htmlsi=51b2XP_84GH3q6oF
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 ! :)
Glad I could help!
Perfect thank you so much ! I didn’t want to use any external library and this is exactly what i needed
Glad it helped!
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.
You are welcome 😊
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.
Glad to hear that!
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
literally you're awesome. thank you so much dude
Happy to help!
Thank you for the tutorial, very clear and straight to the point
You are welcome!
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.
I was about to use Bootstrap’s image slider component until I found this video! Thank you for your informative video ! Like and subscribed ❤
Great to hear!
Well done. Seriously.
THANK YOU for making this simple and to the point.
Thank you!
Great tutorial. Many thanks.
Glad it was helpful!
BROTHER, YOU ARE THE BEST!!! You oooh really helped me!! THANK YOU VERY MUCH!
Glad I could help!
Thank you, your tutorial is very easy to understand and that's perfect for React beginners like me!
Glad it was helpful!
Excellent work, very clear and easy to understand. Thank you very much. I will keep watching your channel and will definitely recommend you.
Thank you so much!
Unbelievably easy to follow. Great tutorial. Good and clean explanation. Thank you so much
Glad you enjoyed it!
Brilliant. Simple and easy to understand.
Glad to hear that!
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
confused when i downloaded and opened soft soft . I couldnt find any good and informative video for beginners to help
THANKS, MAN!
God bless you!
Forte abraço do Brasil!!!
You are welcome!
finally someone who just shows how to make a slider without having to install a third party library, I find devs have become so lazy lately, installing libraries for every single new feature is such a bad practice in my opinion. Thanks for this tutorial
Glad you like it!
Thanks for your easy to follow explanations, one step at a ti. It makes learning less overwhelming!
You're very welcome!
🙏🏼🙏🏼 my guy saved me like 5 hours
Thank you!
Thank you so much for the tutorial. This video was very useful for many of my projects. :)
Glad it was helpful!
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
Without you, my soft wouldn't be possible.
Thank you so much! Request you to please update this to animation slider so it moves smoothly back and forth
Hi there is no planned updated to this video but I can recomment you to look on animations in css to implement that.
@@MonsterlessonsAcademy Very Nice and concise tutorials
great! about to find several slider in react and hard to customize but find solution from scratch!! awesome bro
going to buy your courses!! thx bro for good contens
Glad I could help!
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
Thank you for the idea!
Great job!
Neatly explained.
Glad to hear that
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.
How to replace url by src ? it is possible ?
Thanks a lot for this awesome tutorial
Welcome 😊
Thanks Monsterlessons, you did a great monster job here. I'll looking out for you videos.
Glad to hear that!
TNice tutorials is going in my helpful tutorials playlist.
Don’t be afraid, just embrace it.
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
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
Awesome!
TNice tutorials was an amazing tutorial. You are a great teacher
simple but very useful, this was the one of the best videos so far. Thanks)
Thank you!
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.
@@robbinluo2810 yeap, but I've build that feature on my own
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
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 ?
It's gruvbox. Yes it is available also for vscode.
Thank you very much for this tutorial, Great work!
You're very welcome!
Thank you very much for this tutorial, but I'd like to know how to make the carousel with imported images
img url didn't render
what should i do?
const slideStyles = {
width: "100%",
height: "100%",
borderRadius: "10px",
backgroundSize: "600px 600px",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
};
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!)
You're very welcome!
concepts finally line up in my brain and...well, who knows? Maybe I'll be able to make sotNice tutorialng now.
and i wish you good luck with your future endeavors ❤
Thank you!
DUDE, I got so frustrated 'cause of that problem, thanks a lot!
Glad I could help!
Thanks a lot. TNice tutorials video got started.
Thanks! It is a very good tutorial 👍
Glad it was helpful!
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.
Sure. You can use any approach that you like.
Great really helpful n easy to understand
Glad you think so!
You can't vicariously experience sotNice tutorialng through another person, the sa way you need to try it for yourself before losing hope.
that's a called step solver! 🤩🤩🤩
Thank you!
Thanks for the tutorial , it's really helpful.
Glad it was helpful!
Thank you.
Do you prefer in-component styling over a css external file?
Doesn't matter for me. Probably styled components.
Thank you Sir! TNice tutorials helps alot !
Thank you so much, man, saved me here
Glad I could help
Facing a problem. When I'm moving to next image initially a white screen appearing and then only the image is rendering
Damn! Worked like a charm! Thank you soooo much!
You are welcome!
great tutorial.... Please is there a way for one to add some transition effect to the carousel?
The advanced features in a slider comes as a new video soon. Stay tuned.
Thanks this video is very helpful ☺️😊
Most welcome 😊
Thank you so much!!! Straight forward
You are welcome!
Awesome work! How do you build the same carousel but with autoplay? I want to build a ticker tape with infinite scroll/autoplay but with arrows
Stay tuned, part 2 comes in 2 weeks.
@@MonsterlessonsAcademy Thank you so much for this video tutorial. Looking forward to part 2 👍🏻
I'm unable to access photos from local host, the error says this site can be react and local host refused to connect
thank you soo much for this tutorial, i love your explaination
You're very welcome!
Thank you so much, you just saved me.
You are welcome!
Hi, excelent video! I followed this tutorial but my images from the url are not showing in the slider, what can I do?
No idea. You need to debug this.
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 .
There is a link in the first comment to the second video which implements this functionality.
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
What do you mean exactly?
THANK YOU SIR, YOU ARE FANTASTIC!!
You are very welcome!
Thanks from Mali !
Welcome!
you are awesome
thank you so much!
can you give more info about how to use ({slides})
Its like straight props, without keyword props
You are welcome! slides is just props which we destructure directly in slides variable.
@@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
That was great, thank you!
You're very welcome!
Thanks for this tutorial.
Can you please tell me how to implement animation for this slider?
The advanced features in a slider comes as a new video soon. Stay tuned.
It worked! Tank you sir.
You're welcome!
Great content as always please in the future we need some angular mini projects and ideas please and thank you
Will do!
thank you so much this channel is awesome keep going@@MonsterlessonsAcademy
big thanks its really usefull for me
Happy to help
Will stay tuned to your channal! Cheers!
Thank you!
I want to custom it like I display 3-4 Images in single slide, how can I do this ?
Very very very useful thanks a lot
You are most welcome
awesome as always
Thanks again!
using soft, can't wait to get my hands on it.
Very helpful content.....Thanks
My pleasure
Thanks. I wish you did it with separate css file.
Apparently, is it all messed up when you (..me..) try.
You are welcome!
@@MonsterlessonsAcademy Well, I did found myself struggling in order to make it work, but I appreciate it nonetheless. Thank you.
How to change color of below round buttons in accordance to the arrows clicked to show which image is selected?
wow so clear and understandable thanks
Glad it was helpful!
Hi there, nice tutorial. By the way, what is theme you are using?
It's gruvbox
Thank you so much brother!
You're welcome!
Thank you for sharing your knowledge :)
Glad it was helpful!
How to change your change your channel rack from Dub back to the original channel rack you have
Great content, but can u pls show how to make slides autoplay.
I tried with setInterval, setTimeout and useEffect, but there are some glitches.
Hi I didn't try that but useEffect + setInterval should go. Or maybe useRef.
@@MonsterlessonsAcademy Yeah that works, but if user manually clicks previous or next button, then autoplay won't work properly
thank you so much, great job
You're welcome!
GREATEST ONE EVER !
Thank you!
Great video! I only want to ask, is there a way (without removing the arrows and goToNext or goToPrevious functionalities)
to include a functionality for an automatic slider, so that each image can be shown for, lets say, 2 seconds and then it automatically changes to the next one? And if that can be done, in a way it suits you based on how you have built the whole thing, could you pls make an updated video for that?
You need to look in setInterval and clearInterval.
Will this be by default working swiping with a phone? Or just by clicking on the arrows?
Clicking on the arrows with work on phone but swipe not. You need to add this functionality.
Great tutorial! Really helped me create a slider from scratch! However, how do you make the dots active, so that the user knows which image they clicked on? For example, the dot that they click on turns red from black?
you have an active index so just apply a class to the dot if the index equals active index
Great tutorial , thx
You're welcome!