Enhance Image Viewer Usability with Standard Navigation

[Jeffrin2005]

Current Behavior

Current image viewer displays thumbnails on the right side, taking up unnecessary space. It is not user-friendly, and in mobile view, the image previews are not visible. Most websites use navigation buttons to move between images, making it clear to users that there are more images to view.
https://layer5.io/cloud-native-management/meshery/integrations/aws-cloudfront

feature2.mp4

Desired Behavior

A Horizontal image slider with navigation using left/right arrows.

Expected Output for desktop and mobile view

feature1.mp4

Screenshots / Mockups

Implementation

Acceptance Tests

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[Jeffrin2005]

@leecalcote @miacycle @vishalvivekm I would like to work on this feature ? Can I get it assigned ?

[leecalcote]

Yes, thank you for pointing this out. @vishalvivekm and I were noticing this issue recently. @Jeffrin2005, it might be that a recent upgrade of one of the dependent packages has caused this carousel / picture viewer behavior to take a turn for the worse.