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.
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
@@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
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.
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
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!
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 !
aged like a wine. Appreciate what you have done chief!
Love it when videos are short and useful.
Much appreciated! Skipping the fluff!
thank you so much for making this amazing image slider using react & tailwind css
Ты один из лучших! Здоровья тебе родным и близким. Спасибо бро!
How should I import my own images and not the images from * ?
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 so much! Finally a clean and easy to read slider. 🙌🏼
Thank you so much
thanks
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.
This is a really clever tutorial .
Thank you so much. Great addition to my client's website.
Great to hear!
Very good tutorial. I'm using the current next 13 and this works perfctly.
Glad it helped
Excellent explained. Great work, go on💐💐
Glad to learn everything about Tailwind CSS! Thanks!
Love it thank you!
How to add a timer in it?
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 man, very helpful and elegant solution
this is simpe and effective thank you so much !
It was really simple and amazing video
Great Job Man!❤
Thank you so much 😀
awesome tutorial highly recomended i got here from bard sugesstion
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
men thankyou, you are a hero
Thank you !
Really appreciated your video. Very helpful information! Great explanation!
It looks amazing, thanks!
Nice Video. This video is helpful for me
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. :)))
How did the transitions work? I’m using local files and how can I make that transition?
Very cool, thanks so much for this great video!
You saved my day! Thx!
how can i change the color of the active dot?
very well explained
Thanks a lot. This has helped me a lot
Thanks for Sharing 🚀🔥
Nice , love tailwind and react
Hard to go back to writing out css haha
Really HelpFul Thanks A lot
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
I like to watch short useful videos like that. I can create my own slider :D Thanx
its really cool brother
How did you add that smooth sliding when you press on the arrow?? Is it a tailwind class?
really really amazingvideo ever i see on youtube related carousel
Thanks!
Thank you!
Thanks dude!
what if I want to use images instead of url?
This gave me errors:
🚀🚀🚀 09:30
You rock, man!!
Awesome dude!
Really helpful!
Thank you for the tutorial! Very useful :D
Thank you!
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
about the dots, what if there are 100 images?
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
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?
awesome man thank s
it is very useful, thanks sir.
why didn't you use vite to setup your react project?
Vite is great too!
Lovely 😍
Sleek. Thanks for the great tutorial.
Thanks for watching!
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?
Can you please explain the logic inside those two button?
How use backend url
Therefore not working in background image current index
Please reply
thanks for this video very useful😀
Most welcome 😊
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
Very useful
Thank you, you good
Not connected to the video, but what freelance websites did you use to offer your services?
great video.
Bro forgot to give us the animation🙂
How can we add autoplay
Can I use instead to create that transition?
Sure thing
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
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
Please react video carousel.. there are many videos of image slider.. but a few and old videos of video slider
Same concept :) will do!
How can i type in two tags at the same time ? like at 7:29
Hold down control or alt. One of those… lol
It is not clear to see the codes
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