Skip to content

fix: add left/right navigation buttons to carousel block#72

Open
StephenTangCook wants to merge 1 commit into
mainfrom
claude/hopeful-pare-31b73f
Open

fix: add left/right navigation buttons to carousel block#72
StephenTangCook wants to merge 1 commit into
mainfrom
claude/hopeful-pare-31b73f

Conversation

@StephenTangCook
Copy link
Copy Markdown
Collaborator

Summary

Fixes #65. The carousel block previously rendered as a horizontal scroll row with no navigation controls, while Slack's official Block Kit renderer overlays chevron buttons on the left/right edges of the row.

  • Adds left/right chevron buttons overlaid on the carousel, matching Slack's caret-left / caret-right icon paths
  • Buttons appear/disappear dynamically based on scroll position (left hides at the start, right hides at the end), using a scroll listener plus a ResizeObserver so resizing the container updates visibility
  • Clicking scrolls the track by ~80% of its visible width using scrollBy({ behavior: "smooth" }), which naturally lands on the next snap point thanks to the existing snap-mandatory
  • 8px tolerance on scroll-position checks so the existing px-1 track padding doesn't cause the left arrow to flash on load

Test plan

  • pnpm lint (tsc) passes
  • pnpm build produces clean ESM + CJS + d.ts output
  • Playground renders the carousel with only the right chevron visible at initial scroll position, both chevrons after scrolling, and only the left chevron at the end
  • Manual verification in a real browser that smooth-scroll + snap behave correctly (the headless preview I used did not support programmatic scrolling, but scrollBy is a standard browser API)

🤖 Generated with Claude Code

Carousel previously rendered as a horizontal scroll row with no
navigation controls, while Slack's official Block Kit renderer overlays
chevron buttons on the left/right edges. This adds matching arrow
buttons that scroll the track and hide automatically at each end.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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.

Carousel block missing left/right navigation buttons

1 participant