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;
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
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
![BOWKYLION - วิงวอน (ex-change) [Official MV]](http://i.ytimg.com/vi/cLdnZWDaO-w/mqdefault.jpg)
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
Used to think carousel required some esoteric knowledge until I went through this video. Massive thanks man.
I love how you went straight to the point.
Thank you so much
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
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!
tried a bunch of different carousel packages for react/typescript, this tutorial smashes them all out of the park, with no dependencies either, nice
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
Used SASS and dropped images in the folder instead of links. Added some more hover effects and my God, amazing. Great tutorial!
Finally I was able to create an easily customizable react slider to showcase my beginner projects, thanks a lot !
Love it when videos are short and useful.
Much appreciated! Skipping the fluff!
How should I import my own images and not the images from * ?
aged like a wine. Appreciate what you have done chief!
thank you so much for making this amazing image slider using react & tailwind css
Ты один из лучших! Здоровья тебе родным и близким. Спасибо бро!
Very good tutorial. I'm using the current next 13 and this works perfctly.
Glad it helped
Thank you so much! Finally a clean and easy to read slider. 🙌🏼
Thank you so much. Great addition to my client's website.
Great to hear!
This is a really clever tutorial .
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
Thank you man, very helpful and elegant solution
Glad to learn everything about Tailwind CSS! Thanks!
Love it thank you!
How did the transitions work? I’m using local files and how can I make that transition?
Excellent explained. Great work, go on💐💐
this is simpe and effective 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.
awesome tutorial highly recomended i got here from bard sugesstion
How did you add that smooth sliding when you press on the arrow?? Is it a tailwind class?
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?
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
Great Job Man!❤
Thank you so much 😀
Thank you so much
Really appreciated your video. Very helpful information! Great explanation!
It was really simple and amazing video
How to add a timer in it?
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
what if I want to use images instead of url?
This gave me errors:
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
men thankyou, you are a hero
Thank you !
Very cool, thanks so much for this great video!
It looks amazing, thanks!
about the dots, what if there are 100 images?
how can i change the color of the active dot?
Ohh Bro
U never disappoint, whenever I want to see something about react or Next js.. I find everything here😂❤
Thanks man!
Thank you very much sir. Great video. :)))
Not connected to the video, but what freelance websites did you use to offer your services?
How use backend url
Therefore not working in background image current index
Please reply
Nice Video. This video is helpful for me
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
Can you please explain the logic inside those two button?
why didn't you use vite to setup your react project?
Vite is great too!
Nice , love tailwind and react
Hard to go back to writing out css haha
I like to watch short useful videos like that. I can create my own slider :D Thanx
thanks
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?
You saved my day! Thx!
Thanks a lot. This has helped me a lot
Thank you for the tutorial! Very useful :D
Thank you!
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
Thanks for Sharing 🚀🔥
really really amazingvideo ever i see on youtube related carousel
Thanks!
very well explained
Really HelpFul Thanks A lot
🚀🚀🚀 09:30
You rock, man!!
Awesome dude!
its really cool brother
Bro forgot to give us the animation🙂
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
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
Thank you!
Thanks dude!
Sleek. Thanks for the great tutorial.
Thanks for watching!
it is very useful, thanks sir.
Really helpful!
awesome man thank s
Lovely 😍
Can I use instead to create that transition?
Sure thing
thanks for this video very useful😀
Most welcome 😊
How can we add autoplay
thank you
It is not clear to see the codes
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
Very useful
Thank you, you good
Please react video carousel.. there are many videos of image slider.. but a few and old videos of video slider
Same concept :) will do!
great video.
How can i type in two tags at the same time ? like at 7:29
Hold down control or alt. One of those… lol
thank you alot
Excelent 👋
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
Awesome video sir
thank you!
thankyou
thanks