ampproject / ampproject/amphtml
Improve carousel navigation by hiding inactive arrow buttons
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
### Description
In the horizontal scrolling carousel (as shown in the attached screenshot), both the left and right arrow buttons are always visible.
However:
- The **left arrow** appears even when the carousel is already at the first item.
- The **right arrow** remains visible even when the carousel is at the last item.
### Expected Behavior
- The **left arrow** should be hidden or disabled when the first item is in view.
- The **right arrow** should be hidden or disabled when the last item is in view.
This small UX enhancement will make the interface cleaner and more intuitive for users.
This change will:
- Prevent users from clicking inactive navigation buttons.
- Improve the overall polish and responsiveness of the UI.
- Enhance accessibility and user satisfaction, especially on smaller screens or touch devices.
I'd be happy to help with a PR if needed.
### Alternatives Considered
Another option could be disabling the arrows instead of hiding them, but hiding provides a cleaner look and better user feedback.
Contributor guide
Research direction
No implementation file or test is named. Start by locating the horizontal scrolling carousel and its arrow-navigation tests, then inspect how the first and last visible items are detected. Done means the left and right controls are hidden or disabled at their respective boundaries, with accessible behavior preserved.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100