Build a React Image Slider with Tailwind CSS

[@vitorac412]

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;

[@Darkah]

Im using Nextjs and i got the userState error, how to solve not using jsx and how to solve for non server renderation

[@ad3098]

"use client"@@Darkah

[@nixonmbeki5690]

Used to think carousel required some esoteric knowledge until I went through this video. Massive thanks man.

[@sumanthprabhu11]

In Appu Indian Accent ->This was the Easiest Tutorial of a Carousel / Slider I have ever seen. Thanks to you and Tailwind CSS

[@codecommerce]

Haha thank you!

[@GiantSquid13]

I love how you went straight to the point. Thank you so much

[@manjeshkumarsharma4946]

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

[@mtsurov]

This is quickly becoming a book of useful recipes. In 18 minutes I learned what Udemy would stretch into 4 hour course. Well done.

[@arhabersham]

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

[@8koi245]

​@@arhabershamNah

[@muhammadrizwan4879]

@@arhabersham indeed broh

[@samuelreedy1389]

tried a bunch of different carousel packages for react/typescript, this tutorial smashes them all out of the park, with no dependencies either, nice

[@CptSauce]

Used SASS and dropped images in the folder instead of links. Added some more hover effects and my God, amazing. Great tutorial!

[@ChillWebDeveloper]

aged like a wine. Appreciate what you have done chief!

[@unamgege]

Finally I was able to create an easily customizable react slider to showcase my beginner projects, thanks a lot !

[@hiwotina26]

Love it when videos are short and useful.

[@codecommerce]

Much appreciated! Skipping the fluff!

[@BhargavTalpada-go3pl]

thank you so much for making this amazing image slider using react & tailwind css

[@ivanperez5231]

Thank you so much. Great addition to my client's website.

[@codecommerce]

Great to hear!

[@Dreamer_78]

Ты один из лучших! Здоровья тебе родным и близким. Спасибо бро!

[@iLuliBest]

Thank you so much! Finally a clean and easy to read slider. 🙌🏼

[@liuyan8066]

Glad to learn everything about Tailwind CSS! Thanks!

[@codecommerce]

Love it thank you!

[@carloschinyuku]

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.

[@thebigbangcoder]

Thank you so much

[@akhatorosakhogba2993]

This is a really clever tutorial .

[@onar1261]

Thank you man, very helpful and elegant solution

[@antumallick1468]

Great Job Man!❤

[@codecommerce]

Thank you so much 😀

[@1222medi]

this is simpe and effective thank you so much !

[@zeus-yb1ds]

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.

[@himydv]

thanks bro

[@zeus-yb1ds]

@@himydv you're welcome

[@kirovreporting6767]

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}

[@codecommerce]

Thank you Kirov

[@hookahthetravellingmonk]

Very good tutorial. I'm using the current next 13 and this works perfctly.

[@codecommerce]

Glad it helped

[@muhammadmursalin8915]

Excellent explained. Great work, go on💐💐

[@emanuelmanrique9944]

It looks amazing, thanks!

[@gatti311]

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.

[@codecommerce]

Will do sir! Thank you

[@refadhile]

men thankyou, you are a hero

[@codecommerce]

Thank you !

[@Calathea-Z]

Really appreciated your video. Very helpful information! Great explanation!

[@SaikotRoy-wb3go]

It was really simple and amazing video

[@migla2000]

How should I import my own images and not the images from * ?

[@youngun550]

Very cool, thanks so much for this great video!

[@abedalraoufzeidan1461]

awesome tutorial highly recomended i got here from bard sugesstion

[@ANAS4TOSTOBOY]

thanks

[@Deus-lo-Vuilt]

Nice , love tailwind and react

[@codecommerce]

Hard to go back to writing out css haha

[@tiagolourinho2638]

You saved my day! Thx!

[@jovanagluhovic3139]

Thank you very much sir. Great video. :)))

[@Deepak-i9r8i]

Ohh Bro U never disappoint, whenever I want to see something about react or Next js.. I find everything here😂❤

[@codecommerce]

Thanks man!

[@Nanashi-rq7lk]

Nice Video. This video is helpful for me

[@skreddysasi3404]

Thanks for Sharing 🚀🔥

[@thisiskartik]

Really HelpFul Thanks A lot

[@seun.daniel.omatsola]

Thanks a lot. This has helped me a lot

[@Metovski]

I like to watch short useful videos like that. I can create my own slider :D Thanx

[@harihardhik3293]

very well explained

[@andreasiano5953]

How did you add that smooth sliding when you press on the arrow?? Is it a tailwind class?

[@juanhedderich]

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?

[@heliolucio7691]

Thank you!

[@codecommerce]

Thanks dude!

[@ltd5480]

How did the transitions work? I’m using local files and how can I make that transition?

[@rilynnaisa2942]

Thank you for the tutorial! Very useful :D

[@codecommerce]

Thank you!

[@cgrbasantff8748]

really really amazingvideo ever i see on youtube related carousel

[@codecommerce]

Thanks!

[@muhammadhabiburrahman3372]

its really cool brother

[@AKPist]

what if I want to use images instead of url? This gave me errors:

[@iammtander]

🚀🚀🚀 09:30 You rock, man!!

[@codecommerce]

Awesome dude!

[@wenceslaoavalos9643]

Really helpful!

[@psyferinc.3573]

awesome man thank s

[@alihamoud6863]

it is very useful, thanks sir.

[@asifzulfiqar2517]

How to add a timer in it?

[@lawrencemichael5571]

This is really great but I was hoping you'd also include code to allow the dots to show where we are.

[@besthealthyyou]

Here you go brother

[@VietTranIT]

Sleek. Thanks for the great tutorial.

[@codecommerce]

Thanks for watching!

[@abdulahad1571]

Lovely 😍

[@DevanshuAugusty]

about the dots, what if there are 100 images?

[@omageprosper9673]

why didn't you use vite to setup your react project?

[@codecommerce]

Vite is great too!

[@VictorYazigi]

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

[@betterbehappythannot3605]

Not connected to the video, but what freelance websites did you use to offer your services?

[@hubesh716]

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

[@Metovski]

Yes bro we want Tailwind & redux tool kit e commerce project.

[@iammtander]

True it is. @Code Commerce : A special request sir!!. React, redux tailwind with firebase as backen

[@konradja4310]

+1 guys :D

[@iv9iv9]

That'd be nice

[@yahyamohamoud7290]

that would be good but with context API and not Redux

[@nogafouz2174]

thanks for this video very useful😀

[@codecommerce]

Most welcome 😊

[@PeriklesPeriklesoglu]

thank you

[@gousiyaart2515]

How use backend url Therefore not working in background image current index Please reply

[@oppranto]

Can you please explain the logic inside those two button?

[@mehrdadmousavi9144]

It was great :)) I have a question, suppose we have 4 SVGs instead of slides state, how can we loop through and show them?

[@Smartercow]

What do you mean with SVG's instead of slides state? SVG is still an image.

[@mehrdadmousavi9144]

@@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?

[@Smartercow]

@@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

[@mehrdadmousavi9144]

@@Smartercow Thank you so much, I'll try it

[@CJTHEGAMER]

There's a way i can make the slides move automatically?

[@lindsayaiello501]

I second this. Trying to figure out how to auto slide. Any luck yet?

[@Mirrasim]

Thank you, you good

[@zakariaowen]

Very useful

[@danielflick3707]

how can i change the color of the active dot?

[@rudrajoshi1948]

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

[@navinkumarsahu1159]

one simple trick would be to use setInterval function

[@rudrajoshi1948]

@@navinkumarsahu1159 Thanks

[@navinkumarsahu1159]

@@rudrajoshi1948 Just use swiper js and don't forget to import AutoPlay and add it to the modules array

[@mohamadrezakazemian5220]

great video.

[@hengratanak7633]

thank you alot

[@rafaelventura9819]

Excelent 👋

[@ltd5480]

Can I use instead to create that transition?

[@codecommerce]

Sure thing

[@oretasletters]

Bro forgot to give us the animation🙂

[@jameskeita9657]

thank u so much bro for u video & do u have video react with redux?

[@codecommerce]

Thank you James - I haven't made a video with redux yet. I am looking to do that soon with a project.

[@jameskeita9657]

​@@codecommerce i will wait and it will be a good experience both for me and for others

[@talhatahir461]

Please react video carousel.. there are many videos of image slider.. but a few and old videos of video slider

[@codecommerce]

Same concept :) will do!

[@try-b2k]

How can we add autoplay

[@suraj4522]

Build a react image slider with your gym trainer

[@codecommerce]

Haha thanks dude! 💪

[@nahomfikadu]

It is not clear to see the codes

[@peterrizek8774]

How can i type in two tags at the same time ? like at 7:29

[@codecommerce]

Hold down control or alt. One of those… lol

[@juanpischetz4053]

I want to make a contribution, can I? make a few additions to make it reusable.

[@codecommerce]

Absolutely

[@netsaosa4973]

curosr

[@jeetsikder5912]

Awesome video sir

[@rorodriguez5358]

thank you!

[@mdwaliullah9609]

thanks

[@user-cat848]

thankyou