Your Videos are amazing buddy. I just watched this video till 7 minutes after that I started making my own slider component. And after 1 hour of brainstorming I made it. Your git repository also helped a lot. THANKYOU SO MUCH
If you are using next image component, just do this: const slides = [image, image, image] Im currently learning, so I think this can save some time for another people;
Well to be fair to Udemy courses, consider that you were able to understand this in only 18 minutes because of all the background knowledge on the topic you already have. If you were a newbie, probably a 4 hours would had been necessary to understand the underlaying principles he is using here
I had to login just to give proper props to you. It's incredible how much useful information we had in this video. Excellent didactic, straight to the point, I didn't even had to 2x the video speed - since most of YT like to waste a lot of our time with gimmick. props={toYou}
Thank you for this video, this will help a lot. These kinds of videos are really useful. It would be nice if you continue with these kinds of videos, where you just make some cool and modern component/part of the website.
@@Smartercow In the video we have some unsplash links that he loop (map) them, I say suppose that we have 5 files (Svg, Jpg, ..) how can we loop and show them?
@@mehrdadmousavi9144 I suppose you have those 5 files local(your pc). You put them in images folder in the public folder: /public/images - but instead of the unsplash link, you use the file path without /public like this: /images/your_image_1.svg /images/your_image_2.svg /images/your_image_3.svg /images/your_image_4.svg /images/your_image_5.svg
sir plz make Ecommerce project with Tailwind css and Redux toolkit for state management and firebase for backend plz sir its my request..plz sir Ecommerce project like Amazone better ui design many things plz sir
Your Videos are amazing buddy. I just watched this video till 7 minutes after that I started making my own slider component. And after 1 hour of brainstorming I made it. Your git repository also helped a lot. THANKYOU SO MUCH
If you are using next image component, just do this:
const slides = [image, image, image]
Im currently learning, so I think this can save some time for another people;
Im using Nextjs and i got the userState error, how to solve not using jsx and how to solve for non server renderation
"use client"@@Darkah
I love how you went straight to the point.
Thank you so much
In Appu Indian Accent ->This was the Easiest Tutorial of a Carousel / Slider I have ever seen.
Thanks to you and Tailwind CSS
Haha thank you!
Used to think carousel required some esoteric knowledge until I went through this video. Massive thanks man.
This is quickly becoming a book of useful recipes.
In 18 minutes I learned what Udemy would stretch into 4 hour course.
Well done.
Well to be fair to Udemy courses, consider that you were able to understand this in only 18 minutes because of all the background knowledge on the topic you already have. If you were a newbie, probably a 4 hours would had been necessary to understand the underlaying principles he is using here
@@arhabershamNah
@@arhabersham indeed broh
tried a bunch of different carousel packages for react/typescript, this tutorial smashes them all out of the park, with no dependencies either, nice
Finally I was able to create an easily customizable react slider to showcase my beginner projects, thanks a lot !
Thank you so much
Used SASS and dropped images in the folder instead of links. Added some more hover effects and my God, amazing. Great tutorial!
Love it when videos are short and useful.
Much appreciated! Skipping the fluff!
aged like a wine. Appreciate what you have done chief!
Really great help in implementing for my project!
Great Job Man!❤
Thank you so much 😀
Powerful and amazing stuff, love it. Thanks, for the energy you put into these tutorials, very easy to follow and understand. Keep it up bro.
I had to login just to give proper props to you.
It's incredible how much useful information we had in this video.
Excellent didactic, straight to the point, I didn't even had to 2x the video speed - since most of YT like to waste a lot of our time with gimmick.
props={toYou}
Thank you Kirov
thank you so much for making this amazing image slider using react & tailwind css
It looks amazing, thanks!
Thank you man, very helpful and elegant solution
Thank you so much! Finally a clean and easy to read slider. 🙌🏼
Glad to learn everything about Tailwind CSS! Thanks!
Love it thank you!
thanks
this is simpe and effective thank you so much !
Really appreciated your video. Very helpful information! Great explanation!
Excellent explained. Great work, go on💐💐
men thankyou, you are a hero
Thank you !
You saved my day! Thx!
Thanks a lot. This has helped me a lot
It was really simple and amazing video
useEffect(() => {
const interval = setInterval(() => {
setCurrentIndex((prevIndex) =>
prevIndex === slides.length - 1 ? 0 : prevIndex + 1
);
}, 7000);
return () => clearInterval(interval);
}, [currentIndex, slides.length]);
Add this for autoslide after 7s...Feel free to edit the interval to desired time.
thanks bro
@@himydv you're welcome
Very cool, thanks so much for this great video!
This is a really clever tutorial .
Ты один из лучших! Здоровья тебе родным и близким. Спасибо бро!
🚀🚀🚀 09:30
You rock, man!!
Awesome dude!
Really HelpFul Thanks A lot
How to add a timer in it?
Thank you so much. Great addition to my client's website.
Great to hear!
Nice Video. This video is helpful for me
Thank you very much sir. Great video. :)))
Very good tutorial. I'm using the current next 13 and this works perfctly.
Glad it helped
Thank you for the tutorial! Very useful :D
Thank you!
Thanks for Sharing 🚀🔥
How should I import my own images and not the images from * ?
Nice , love tailwind and react
Hard to go back to writing out css haha
very well explained
Thank you for this video, this will help a lot. These kinds of videos are really useful. It would be nice if you continue with these kinds of videos, where you just make some cool and modern component/part of the website.
Will do sir! Thank you
Lovely 😍
How did you add that smooth sliding when you press on the arrow?? Is it a tailwind class?
Thank you!
Thanks dude!
How did the transitions work? I’m using local files and how can I make that transition?
its really cool brother
awesome tutorial highly recomended i got here from bard sugesstion
awesome man thank s
why didn't you use vite to setup your react project?
Vite is great too!
Really helpful!
really really amazingvideo ever i see on youtube related carousel
Thanks!
it is very useful, thanks sir.
There's a way i can make the slides move automatically?
I second this. Trying to figure out how to auto slide. Any luck yet?
how can i change the color of the active dot?
I like to watch short useful videos like that. I can create my own slider :D Thanx
thanks for this video very useful😀
Most welcome 😊
How can i type in two tags at the same time ? like at 7:29
Hold down control or alt. One of those… lol
Sleek. Thanks for the great tutorial.
Thanks for watching!
Ohh Bro
U never disappoint, whenever I want to see something about react or Next js.. I find everything here😂❤
Thanks man!
about the dots, what if there are 100 images?
thank you
Hey dude, great video, learned a lot, but I have a question. Why make divs with the cursor-pointer class when you can just make buttons?
Not connected to the video, but what freelance websites did you use to offer your services?
I have a question if I want to make it slide on it's own then what changes can I do in the code?? I mean auto play along with buttons too
one simple trick would be to use setInterval function
@@navinkumarsahu1159 Thanks
@@rudrajoshi1948 Just use swiper js and don't forget to import AutoPlay and add it to the modules array
thank you alot
Awesome video sir
Thank you, you good
Very useful
nice
Can you please explain the logic inside those two button?
is there a way for me to make the image shrink when i use it on mobile? it always fits 100% of the carousel div but i can't see the whole image
great video.
This is really great but I was hoping you'd also include code to allow the dots to show where we are.
Here you go brother
what if I want to use images instead of url?
This gave me errors:
Can I use instead to create that transition?
Sure thing
Excelent 👋
It was great :))
I have a question, suppose we have 4 SVGs instead of slides state, how can we loop through and show them?
What do you mean with SVG's instead of slides state? SVG is still an image.
@@Smartercow In the video we have some unsplash links that he loop (map) them, I say suppose that we have 5 files (Svg, Jpg, ..) how can we loop and show them?
@@mehrdadmousavi9144 I suppose you have those 5 files local(your pc). You put them in images folder in the public folder: /public/images - but instead of the unsplash link, you use the file path without /public like this:
/images/your_image_1.svg
/images/your_image_2.svg
/images/your_image_3.svg
/images/your_image_4.svg
/images/your_image_5.svg
@@Smartercow Thank you so much, I'll try it
How use backend url
Therefore not working in background image current index
Please reply
How can we add autoplay
thank u so much bro for u video & do u have video react with redux?
Thank you James - I haven't made a video with redux yet. I am looking to do that soon with a project.
@@codecommerce i will wait and it will be a good experience both for me and for others
sir plz make Ecommerce project with Tailwind css and Redux toolkit for state management and firebase for backend plz sir its my request..plz sir
Ecommerce project like Amazone better ui design many things plz sir
Yes bro we want Tailwind & redux tool kit e commerce project.
True it is. @Code Commerce : A special request sir!!. React, redux tailwind with firebase as backen
+1 guys :D
That'd be nice
that would be good but with context API and not Redux
Bro forgot to give us the animation🙂
It is not clear to see the codes
Please react video carousel.. there are many videos of image slider.. but a few and old videos of video slider
Same concept :) will do!
Build a react image slider with your gym trainer
Haha thanks dude! 💪
I want to make a contribution, can I? make a few additions to make it reusable.
Absolutely
curosr
thank you!
thankyou
thanks