Build a React Image Slider with Tailwind CSS

Build an Image Slider component in React JS styled with Tailwind CSS.
ZeroTo Mastery:
Master React JS Course - bit.ly/Learn-React-JS
Complete Web Developer in 2023 - bit.ly/Complete-Web-Developer
💻 Solve EDABIT coding challenges - BEGINNER! 💻
bit.ly/Code-Challenges
🔥 Connect with me on IG 🔥
/ fireclint
☕ Support the channel ☕
www.buymeacoffee.com/clintbriley
🔥 My Coding Equipment 🔥
Logitech MX Wireless Keyboard - amzn.to/3xKPFiN
Logitech MX Master 2S Wireless Mouse - amzn.to/3O5WmRD
SAMSUNG 49-Inch Gaming Monitor - amzn.to/3mvUy8M
Shure MV7 USB Podcast Microphone - amzn.to/3O00nqG
Mic Boom Arm - amzn.to/3NHn6YU
Monitor Desk Light Bar - amzn.to/3xzKlyj
Github:
github.com/fireclint/react-ta...

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

[@GiantSquid13]

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

[@unamgege]

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

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

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

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

[@iLuliBest]

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

[@CptSauce]

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

[@BreadForBrain100]

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

[@BhargavTalpada-go3pl]

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

[@onar1261]

Thank you man, very helpful and elegant solution

[@hiwotina26]

Love it when videos are short and useful.

[@codecommerce]

Much appreciated! Skipping the fluff!

[@emanuelmanrique9944]

It looks amazing, thanks!

[@Calathea-Z]

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

[@liuyan8066]

Glad to learn everything about Tailwind CSS! Thanks!

[@codecommerce]

Love it thank you!

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

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

[@youngun550]

Very cool, thanks so much for this great video!

[@tiagolourinho2638]

You saved my day! Thx!

[@SaikotRoy-wb3go]

It was really simple and amazing video

[@muhammadmursalin8915]

Excellent explained. Great work, go on💐💐

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

[@seun.daniel.omatsola]

Thanks a lot. This has helped me a lot

[@Dreamer_78]

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

[@ivanperez5231]

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

[@codecommerce]

Great to hear!

[@thebigbangcoder]

Thank you so much

[@rilynnaisa2942]

Thank you for the tutorial! Very useful :D

[@codecommerce]

Thank you!

[@jovanagluhovic3139]

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

[@thisiskartik]

Really HelpFul Thanks A lot

[@skreddysasi3404]

Thanks for Sharing 🚀🔥

[@Metovski]

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

[@Deus-lo-Vuilt]

Nice , love tailwind and react

[@codecommerce]

Hard to go back to writing out css haha

[@antumallick1468]

Great Job Man!❤

[@codecommerce]

Thank you so much 😀

[@wenceslaoavalos9643]

Really helpful!

[@harihardhik3293]

very well explained

[@Nanashi-rq7lk]

Nice Video. This video is helpful for me

[@abedalraoufzeidan1461]

awesome tutorial highly recomended i got here from bard sugesstion

[@muhammadhabiburrahman3372]

its really cool brother

[@rorodriguez5358]

thank you!

[@psyferinc.3573]

awesome man thank s

[@hookahthetravellingmonk]

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

[@codecommerce]

Glad it helped

[@refadhile]

men thankyou, you are a hero

[@codecommerce]

Thank you !

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

[@ANAS4TOSTOBOY]

thanks

[@alihamoud6863]

it is very useful, thanks sir.

[@PeriklesPeriklesoglu]

thank you

[@user-cat848]

thankyou

[@cgrbasantff8748]

really really amazingvideo ever i see on youtube related carousel

[@codecommerce]

Thanks!

[@ltd5480]

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

[@Mirrasim]

Thank you, you good

[@zakariaowen]

Very useful

[@hengratanak7633]

thank you alot

[@nogafouz2174]

thanks for this video very useful😀

[@codecommerce]

Most welcome 😊

[@user-ku1rd6zy3b]

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

[@codecommerce]

Thanks man!

[@iammtander]

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

[@codecommerce]

Awesome dude!

[@heliolucio7691]

Thank you!

[@codecommerce]

Thanks dude!

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

[@mohamadrezakazemian5220]

great video.

[@migla2000]

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

[@VietTranIT]

Sleek. Thanks for the great tutorial.

[@codecommerce]

Thanks for watching!

[@andreasiano5953]

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

[@rafaelventura9819]

Excelent 👋

[@danielflick3707]

how can i change the color of the active dot?

[@asifzulfiqar2517]

How to add a timer in it?

[@shazo9000]

great video, but i'm having issue getting the duration transition to work after clicking directional button they don't fade in they just appear? any reason that is something missing in tailwind?

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

[@gousiyaart2515]

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

[@AKPist]

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

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

[@oppranto]

Can you please explain the logic inside those two button?

[@try-b2k]

How can we add autoplay

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

[@ivann6249]

That'd be nice

[@yahyamohamoud7290]

that would be good but with context API and not Redux

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

[@ltd5480]

Can I use instead to create that transition?

[@codecommerce]

Sure thing

[@omageprosper9673]

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

[@codecommerce]

Vite is great too!

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

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

[@oretasletters]

Bro forgot to give us the animation🙂

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

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

[@jeetsikder5912]

Awesome video sir

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

[@nahomfikadu]

It is not clear to see the codes

[@suraj4522]

Build a react image slider with your gym trainer

[@codecommerce]

Haha thanks dude! 💪

[@juanpischetz4053]

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

[@codecommerce]

Absolutely

[@netsaosa4973]

curosr

[@mdwaliullah9609]

thanks