chore(website): make caurosel horizontally scrollable (closes #562) #639
Conversation
…t/carousel-animation Carousel animations
Co-authored-by: Vivian Plasencia <v.pcalana@gmail.com>
…actor/responsive-footer Responsive footer
…actor/responsive Responsive navbar
…t/learn-page Create Website Learn page
…re/pse-icon Add PSE icon to the button in the "Projects" page
…t/website-metadata Add website metadata
…/website-metadata Change website metadata
…/website-metadata-img Update website metadata image
…f/background-images NextJS background images
…s/v4-alpha V4-alpha documentation
Co-authored-by: Vivian Plasencia <v.pcalana@gmail.com>
Co-authored-by: Vivian Plasencia <v.pcalana@gmail.com>
Co-authored-by: Vivian Plasencia <v.pcalana@gmail.com>
Co-authored-by: Vivian Plasencia <v.pcalana@gmail.com>
…d-new-videos Added the new videos
…re/cookies Matomo script for cookies
| @@ -71,6 +71,7 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps | |||
| <HStack w="full" overflow="hidden"> | |||
| <HStack | |||
| w="full" | |||
| overflowX="auto" // Enable horizontal scrolling | |||
There was a problem hiding this comment.
It looks like the arrows buttons don't work properly after scrolling. I'm testing it with my laptop. Could you try it?
There was a problem hiding this comment.
You are right -- I forgot to test the arrows buttons and they were not working.
I've added a new commit that should fix this :) (at least on my laptop in several browsers, both the arrows and the scrolling should be working now)
There was a problem hiding this comment.
Hey @intldds, they are working now. But when I scroll and then use the arrows the scrollbar changes its size and cannot be used to reach all the items anymore. Can you see it?
There was a problem hiding this comment.
Hi @cedoor, the Right Arrow seems to be working fine with the desired behavior. However, the Left Arrow indeed is not working as supposed to. I would guess the problem is probably in the previousProject const, which is somehow being overridden by the scrolling functionality.
I've tried making some changes but unfortunately couldn't make it work. It's a bit weird because the Right Arrow recognizes the index of the project and works fine, but when clicking on the Left Arrow it always assumes the index is 0 and takes me back to the last project.
Both previousProject and nextProject are built in similar way, so I can't figure out why the scrollbar only causes this error on the left side.
|
Hey @intldds! Thank you so much for all the work. What about using We could have control every time the element is scrolled. Then we can set the value in a way that if it was scrolled and someone click on one of the arrows, the list will start from the beginning. Then, if someone wants to scroll, they can do it and if they want to click on the arrows they can do it too. What do you think? |
chore(website): make caurosel horizontally scrollable (closes #562)
Added horizontal scrolling on the "Carousel.tsx" fileDescription
Added horizontal scrolling on the "Carousel.tsx" file Feature (website) Carousel isn't scrolling horizontally (issue #562) Carousel should be scrolling horizontally now NoRelated Issue(s)
#562Other information
I've basically just added one line in the
Project Cardbox:overflowX="auto"and it should work smoothly : )
Checklist
yarn prettierandyarn lintwithout getting any errors