ampproject / ampproject/amphtml

Improve carousel navigation by hiding inactive arrow buttons

Open
#40,356 5 comments 0 reactions 0 assignees View on GitHub
Type: Feature Request
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.