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:
- Master React JS Course - bit.ly/Learn-React-JS
- Complete Web Developer in 2023 - bit.ly/Complete-Web-Developer...
Coding Challenges!
bit.ly/Code-Challenges
Github Repo
github.com/fireclint/horizont...
Tailwind Scrollbar Hide Package
www.npmjs.com/package/tailwin...
🔥 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

[@JJ-ot3ps]

great video! been looking for this for a while!

[@anshXR]

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

[@codecommerce]

Thank you Ansh!

[@Badnercalabrese]

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

[@codecommerce]

Appreciate it! I was thinking of changing the name of the channel to my full name - not sure yet.

[@amirnejat5215]

Amazing and helpful ty😭

[@rayusaki88]

Very helpful! Thanks man 🙏🏻🙏🏻

[@codecommerce]

Thanks man!

[@mohanadoo]

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

[@codecommerce]

Glad it was helpful!

[@mardiyaz4287]

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

[@gabrielvega415]

lol i'm in love with tailwind.

[@DevIsrael]

thanks man, kudos to you

[@studyafa7159]

greately explaine brother......

[@ittarek5870]

nice video. thank you

[@raulbtmonteiro]

Very usefull! Thanks for sharing

[@codecommerce]

Thank you dude!

[@sushantw834]

Thank you.

[@rebazjabar7660]

that is what i wanted thanks alot

[@codecommerce]

Thank you sir!

[@kingjoo8309]

brother it's helpful I hope for you success

[@codecommerce]

Thank you so much!

[@alexdin1565]

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

[@fatimaiqra2169]

thanks a lot!

[@codecommerce]

Welcome!

[@muratti32]

thank you. very helpfull

[@codecommerce]

Thank you 🙏

[@mohamedyoussef8835]

Awesome video +++++++++++++++++ 😃

[@soakedso334]

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

[@ParaViciosos]

muchas gracias ! me sirvio de mucho

[@codecommerce]

Anytime sir!

[@cristiannass3945]

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

[@andersonsimeon4172]

Thank you very much

[@codecommerce]

Thank you Anderson

[@Yukthiisuranga]

thank you

[@codecommerce]

You're welcome!!

[@andreasiano5953]

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.

[@pinguk9130]

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?

[@mka70701]

please tell me how to add infinity autoplay slide

[@ngc918]

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?

[@codecommerce]

Awesome! Check the positioning & z-index in CSS :)

[@sajjadhoviegar5950]

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?

[@user-kv7qd2gd8f]

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

[@Hoid1014]

God

[@PraveenMaurya-no6nf]

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

[@andreasiano5953]

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

[@cezarylachut4428]

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

[@codecommerce]

Haven’t done much with Vite.

[@giovannaramos3239]

can scrollLeft be modified ?

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

[@codecommerce]

Mounis - you are correct, a bit hacky. Perhaps I’ll do a follow up video with useRef

[@mounis]

@@codecommerce that'll be great

[@notagant47]

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.

[@vasilemidrigan50]

Can I do that without Tailwind?

[@buivancong8967]

not reponsive ?

[@RudraStorm34]

How can we scroll on touching the items?

[@codecommerce]

Like click and drag?

[@RudraStorm34]

@@codecommerce yeah

[@safiullah7184]

Appreciate your efforts man Everything sounds good excpet getelementbyid. Dude you are manipulating the DOM directly which we should not do in React JS

[@pinguk9130]

Sir Can you please try this with videos??

[@codecommerce]

Good idea pingu

[@pinguk9130]

@@codecommerce I have tried this with videos with tailwind css and it worked.😊

[@pinguk9130]

@@codecommerce sir one more thing can we connect multiple pages in reactjs. And also full website with frontend and backend

[@ismailk7021]

so I used the scroll function exactly like you showed in the video, but its not working.. I am using nextjs with typescript, but here is the code: const slideLeft = () => { let slider: HTMLElement = document.getElementById('slider')! slider.scrollLeft = slider.scrollLeft - 500 } const slideRight = () => { let slider: HTMLElement = document.getElementById('slider')! slider.scrollLeft = slider.scrollLeft + 500 }

[@daotieesn]

U ARE Fix this ? I have the same issue

[@ismailk7021]

@@daotieesn Yeah you need to wrap a div around the div that has the slide function.

[@snorfold]

thats not realy optimised.. 2 function for that please only 1 is needed... and why getElementByid please use useRef with hooks

[@kamaboko1]

Make your own tutorial and post it.

[@usmanrangrez-cd7zj]

const sliderRef = useRef(null); //use this is your element ref={sliderRef} const slideLeft = () => { sliderRef.current.scrollLeft -= 500; }; const slideRight = () => { sliderRef.current.scrollLeft += 500; };

[@unboxinggadgets4105]

Pls sir use bootstrap css, in india developer don't use tailwind css

[@codecommerce]

Oh no I hate using bootstrap! haha. I'll try and use it a least once in a video :)