Build a React Image Slider with Tailwind CSS

Build an Image Slider component in React JS styled with Tailwind CSS.

ZeroTo Mastery:

💻 Solve EDABIT coding challenges - BEGINNER! 💻

🔥 Connect with me on IG 🔥

☕ Support the channel ☕

🔥 My Coding Equipment 🔥

Github:

[vitorac]

If you are using next image component, just do this:
const slides = [image, image, image]
<Image src={slides[currentIndex]} alt="ImageDescription" width={YourSSWidth} height={YourSSHeight}/>

Im currently learning, so I think this can save some time for another people;

[nixonmbeki]

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

[GiantSquid]

I love how you went straight to the point.

Thank you so much

[sumanthprabhu]

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

[manjeshkumarsharma]

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.

[samuelreedy]

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!

[unamgege]

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

[BhargavTalpada-gopl]

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

[ChillWebDeveloper]

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

[hiwotina]

Love it when videos are short and useful.

[ivanperez]

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

[Dreamer_]

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

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

[hookahthetravellingmonk]

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

[zeus-ybds]

useEffect(() => {
const interval = setInterval(() => {
=>
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.

[iLuliBest]

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

[gatti]

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.

[onar]

Thank you man, very helpful and elegant solution