Skip to content

feat: add Carousel component#458

Open
braianj wants to merge 1 commit into
masterfrom
feat/carousel-component
Open

feat: add Carousel component#458
braianj wants to merge 1 commit into
masterfrom
feat/carousel-component

Conversation

@braianj

@braianj braianj commented Jul 23, 2026

Copy link
Copy Markdown
Collaborator

Adds a generic, composition-based Carousel primitive. Consuming apps (sites) hand-roll and re-import a single carousel implementation across several surfaces (Home rows, Create sections); this promotes it into the shared library so it stops living in app code.

Behavior:

  • Infinite loop via a tripled-item track (clone → real → clone) with an imperceptible snap back into the real range on transition end.
  • Drag/swipe (mouse + touch), with a click-suppression guard so a drag doesn't trigger slide clicks.
  • Autoplay that pauses when the tab is hidden (visibilitychange); autoplayDelay={0} disables it.
  • Dot pagination and desktop hover nav buttons.

Composition over configuration: the consumer owns each slide through renderItem / keyExtractor, so the carousel carries no domain knowledge. Responsive slide geometry uses ui2's own useDesktopMediaQuery and theme breakpoints; colors come from theme tokens.

Generic public API (Carousel, CarouselProps<T>) exported through src/index.ts. Additive; no existing component or type changed.

Verified locally: prettier, eslint, lint:package-json, tsc build (strict, incl. noImplicitReturns) and the jest suite all pass. Storybook stories added (Decentraland UI/Carousel): default, autoplay-disabled, narrow slides.

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying ui2 with  Cloudflare Pages  Cloudflare Pages

Latest commit: db12f75
Status: ✅  Deploy successful!
Preview URL: https://c0346500.ui2-423.pages.dev
Branch Preview URL: https://feat-carousel-component.ui2-423.pages.dev

View logs

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.

1 participant