How to Scroll Horizontally in React JS - Styled With Tailwind CSS - Javascript
HTML-код
- Опубликовано: 27 сен 2024
- 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-R...
- Complete Web Developer in 2023 - bit.ly/Complet...
Coding Challenges!
bit.ly/Code-Ch...
Github Repo
github.com/fir...
Tailwind Scrollbar Hide Package
www.npmjs.com/...
🔥 Connect with me on IG 🔥
/ fireclint
☕ Support the channel ☕
www.buymeacoff...
🔥 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
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
lol i'm in love with tailwind.
Exactly what I've been looking for! Thanks man ❤
Thank you Ansh!
short easy at the point and perfect that what can i say about this video thanks
great video! been looking for this for a while!
Thanks for sharing this was very useful and easy to implement and you explain the steps very well 👍
Glad it was helpful!
I LIKE YOU CUZ YOU GOT THAT SOMETHING THAT I NEED IN MY LIFE SO GIVE IT TO ME!!!
thank you for the tutorial video,
How do we disable buttons when we are at the first element and last element on the screen?
i want that. Thanks. Can we do the same with tailwind css in more easy way
thanks a lot!
Welcome!
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.
Very helpful! Thanks man 🙏🏻🙏🏻
Thanks man!
greately explaine brother......
please tell me how to add infinity autoplay slide
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.
Amazing and helpful ty😭
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
thanks man, kudos to you
Very usefull! Thanks for sharing
Thank you dude!
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?
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?
Awesome! Check the positioning & z-index in CSS :)
that is what i wanted thanks alot
Thank you sir!
not reponsive ?
Thank you very much
Thank you Anderson
God
How can we scroll on touching the items?
Like click and drag?
@@codecommerce yeah
Appreciate your efforts man
Everything sounds good excpet getelementbyid. Dude you are manipulating the DOM directly which we should not do in React JS
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
}
U ARE Fix this ? I have the same issue
@@daotieesn Yeah you need to wrap a div around the div that has the slide function.
thats not realy optimised.. 2 function for that please only 1 is needed... and why getElementByid please use useRef with hooks
Make your own tutorial and post it.
const sliderRef = useRef(null);
//use this is your element
ref={sliderRef}
const slideLeft = () => {
sliderRef.current.scrollLeft -= 500;
};
const slideRight = () => {
sliderRef.current.scrollLeft += 500;
};
Pls sir use bootstrap css, in india developer don't use tailwind css
Oh no I hate using bootstrap! haha. I'll try and use it a least once in a video :)
Can I do that without Tailwind?
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?
I tried to add a div that wrap the img tag but again the layout breaks.
can scrollLeft be modified ?
Awesome video +++++++++++++++++ 😃
nice video. thank you
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
Haven’t done much with Vite.
Thank you.
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
Mounis - you are correct, a bit hacky. Perhaps I’ll do a follow up video with useRef
@@codecommerce that'll be great
Loving the new branding ! Code commerce ftw.
Really appreciate your content man.
Appreciate it! I was thinking of changing the name of the channel to my full name - not sure yet.
thank you
You're welcome!!
brother it's helpful I hope for you success
Thank you so much!
thank you. very helpfull
Thank you 🙏
muchas gracias ! me sirvio de mucho
Anytime sir!
Sir Can you please try this with videos??
Good idea pingu
@@codecommerce I have tried this with videos with tailwind css and it worked.😊
@@codecommerce sir one more thing can we connect multiple pages in reactjs. And also full website with frontend and backend