How to Scroll Horizontally in React JS - Styled With Tailwind CSS - Javascript

In this video, I will show you how to scroll horizontally in React JS styled with Tailwind CSS. Horizontal scrolling has become quite popular with mobile viewing and companies such as Netflix , Hulu, & Prime so I decided to give one a try. You can easily switch the Tailwind out for plain CSS. No React methods were used, only javascript so you can use this in any javascript project. Thank you for watching.

ZeroTo Mastery:

Coding Challenges!

Github Repo

Tailwind Scrollbar Hide Package

🔥 Connect with me on IG 🔥

☕ Support the channel ☕

🔥 My Coding Equipment 🔥

[JJ-otps]

great video! been looking for this for a while!

[anshXR]

Exactly what I've been looking for! Thanks man ❤

[mardiyaz]

Thanks for this explanation. Clear and precise. Made me also realize tailwind would be ugly and annoying to use in projects. Extensive lines of styling all over the place makes everything look chaotic

[Badnercalabrese]

Loving the new branding ! Code commerce ftw.
Really appreciate your content man.

[mohanadoo]

Thanks for sharing this was very useful and easy to implement and you explain the steps very well 👍

[alexdin]

short easy at the point and perfect that what can i say about this video thanks

[cristiannass]

thank you for the tutorial video,
How do we disable buttons when we are at the first element and last element on the screen?

[soakedso]

I LIKE YOU CUZ YOU GOT THAT SOMETHING THAT I NEED IN MY LIFE SO GIVE IT TO ME!!!

[pinguk]

I was looking for the same can we add videos instead of images ? Can please make a video on that how can we add videos in this slider?

[mka]

please tell me how to add infinity autoplay slide

[andreasiano]

What if i want to write something below the image? I noticed that if i add a h1 tag after the img tag the layout breaks.

[PraveenMaurya-nonf]

i want that. Thanks. Can we do the same with tailwind css in more easy way

[kingjoo]

brother it's helpful I hope for you success

[ngc]

Hey there. I implemented this into my portfolio after watching your portfolio video. I love how it came out! However, for some reason my image gallery goes over my navbar when I scroll down. Any solution for that?

[sajjadhoviegar]

Is this menu scroll-able with touch screens? I mean is it possible to swipe left and right in mobile devices without clicking the icon buttons?

[kvqdgdf]

Hi boss, I implemented the code but in my browser it showing uncaught runtime error


cannot read properties of null (reading '''scrollLeft'') can you help

[andreasiano]

I tried to add a div that wrap the img tag but again the layout breaks.

[cezarylachut]

hi great channel ; - ) i have rect+vite-tailwind, but there is a problem with local img not showing up, even after import, when I import from http it works

[notagant]

I have followed all your code and it's still not working, is it because I use typescript and and Next js ? the javascript is not running smooth at all only jumping and jumping when I scroll.

[mounis]

Isn't there any other way to achieve this, I mean without using a querySelector? Shouldn't we avoid using querySelector in React? Looks somewhat hacky to me. However, I still appreciate what you've done. Thanks