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.
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!)
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
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 ?
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
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.
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?
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 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 - ruclips.net/video/yQHr4opz_N0/видео.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!
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!
Perfect thank you so much ! I didn’t want to use any external library and this is exactly what i needed
Glad it helped!
literally you're awesome. thank you so much dude
Happy to help!
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!
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
Thank you for the tutorial, very clear and straight to the point
You are welcome!
Thank you, your tutorial is very easy to understand and that's perfect for React beginners like me!
Glad it was helpful!
BROTHER, YOU ARE THE BEST!!! You oooh really helped me!! THANK YOU VERY MUCH!
Glad I could help!
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!
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!
Great tutorial. Many thanks.
Glad it was helpful!
Unbelievably easy to follow. Great tutorial. Good and clean explanation. Thank you so much
Glad you enjoyed it!
Without you, my soft wouldn't be possible.
Thanks for your easy to follow explanations, one step at a ti. It makes learning less overwhelming!
You're very welcome!
Brilliant. Simple and easy to understand.
Glad to hear that!
Great job!
Neatly explained.
Glad to hear that
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.
Thanks Monsterlessons, you did a great monster job here. I'll looking out for you videos.
Glad to hear that!
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!
THANKS, MAN!
God bless you!
Forte abraço do Brasil!!!
You are welcome!
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
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
Thank you so much for the tutorial. This video was very useful for many of my projects. :)
Glad it was helpful!
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
🙏🏼🙏🏼 my guy saved me like 5 hours
Thank you!
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!
TNice tutorials was an amazing tutorial. You are a great teacher
Thanks a lot for this awesome tutorial
Welcome 😊
Thank you very much for this tutorial, Great work!
You're very welcome!
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
TNice tutorials is going in my helpful tutorials playlist.
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
How to replace url by src ? it is possible ?
and i wish you good luck with your future endeavors ❤
Thank you!
Thank you Sir! TNice tutorials helps alot !
awesome as always
Thanks again!
confused when i downloaded and opened soft soft . I couldnt find any good and informative video for beginners to help
Damn! Worked like a charm! Thank you soooo much!
You are welcome!
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
Don’t be afraid, just embrace it.
that's a called step solver! 🤩🤩🤩
Thank you!
Great really helpful n easy to understand
Glad you think so!
concepts finally line up in my brain and...well, who knows? Maybe I'll be able to make sotNice tutorialng now.
Thanks for the tutorial , it's really helpful.
Glad it was helpful!
Thanks! It is a very good tutorial 👍
Glad it was helpful!
Will stay tuned to your channal! Cheers!
Thank you!
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.
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!
Thanks a lot. TNice tutorials video got started.
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!
Thank you so much!!! Straight forward
You are welcome!
Thank you so much, man, saved me here
Glad I could help
img url didn't render
what should i do?
Thanks this video is very helpful ☺️😊
Most welcome 😊
That was great, thank you!
You're very welcome!
Thank you.
Do you prefer in-component styling over a css external file?
Doesn't matter for me. Probably styled components.
Very helpful content.....Thanks
My pleasure
THANK YOU SIR, YOU ARE FANTASTIC!!
You are very welcome!
GREATEST ONE EVER !
Thank you!
It worked! Tank you sir.
You're welcome!
Very very very useful thanks a lot
You are most 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 👍🏻
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.
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!
Great tutorial , thx
You're welcome!
Thanks Mike!
Your so detailed ! SUBBED
Thanks for the sub!
You can't vicariously experience sotNice tutorialng through another person, the sa way you need to try it for yourself before losing hope.
Thanks from Mali !
Welcome!
Thank you for sharing your knowledge :)
Glad it was helpful!
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
Great content again, thank you very much 🎉
Glad you enjoyed it!
wow so clear and understandable thanks
Glad it was helpful!
Thank you so much brother!
You're welcome!
big thanks its really usefull for me
Happy to help
Thanks a tonne man
You're welcome!
Thanks, really helped
Glad to hear!
Thank you very much for this tutorial, but I'd like to know how to make the carousel with imported images
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.
thank you so much, great job
You're welcome!
DUDE, I got so frustrated 'cause of that problem, thanks a lot!
Glad I could help!
Hi there, nice tutorial. By the way, what is theme you are using?
It's gruvbox
Perfect thanks !
You are welcome!
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.
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.
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
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.
Good video, thanks.
Glad you liked it!
Nice video. such as This videos will be very helpfull
Glad you think so!
thank u soo much it helped a lot
Glad it helped!
const slideStyles = {
width: "100%",
height: "100%",
borderRadius: "10px",
backgroundSize: "600px 600px",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
};
using soft, can't wait to get my hands on it.
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.
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?
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