Skip to content

53 Carousel Component#69

Open
seleena-coding-2021 wants to merge 6 commits intomainfrom
53-Carousel
Open

53 Carousel Component#69
seleena-coding-2021 wants to merge 6 commits intomainfrom
53-Carousel

Conversation

@seleena-coding-2021
Copy link
Contributor

Front End Pull Request

Brief Summary

Implements a flexible and reusable Carousel component. The carousel supports both horizontal and vertical scroll orientations (independent of content layout), single or multiple items per view, autoplay functionality with pause-on-hover, navigation arrows, and loop behavior. It accepts any React children (cards, images, videos, etc).

Questions / Considerations for the Future

It would be interesting to consider the need/want of keyboard navigation (using the arrow keys) and potentially swipe/touch (mobile devices).

Image of changes

Screenshot 2025-10-01 at 6 28 10 PM
Screenshot 2025-10-01 at 6 29 07 PM
Screenshot 2025-10-01 at 6 29 42 PM

Closes #53

@seleena-coding-2021 seleena-coding-2021 requested a review from a team as a code owner October 1, 2025 22:29
Copy link
Member

@ethanszeto ethanszeto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey Seleena, I'm still getting a lot of height and visual bugs for the carousel. Vertical components aren't being fully displayed correctly

Screenshot 2025-10-02 at 1 16 01 PM Screenshot 2025-10-02 at 1 16 13 PM

Furthermore, try to only use components from the DS when possible, like <Box> is a <div> wrapper, etc.

Also try to only use colors in the DS for stories. Not a huge deal, though.

Are you using CardItem? I think it might be a good idea to have as a child wrapper, to give you more control over your carousel input elements.

Try to fix these visual changes first and I'll take a closer look at the code afterwards.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Component: Carousel

2 participants