website icon indicating copy to clipboard operation
website copied to clipboard

Improve Image Navigation: Move Buttons Below or Replace with Carousel

Open adityajha2005 opened this issue 9 months ago • 1 comments

Description

Already started working on this issue and would love to create a PR if assigned. Image

Summary

This PR introduces two improvements for the image navigation on the [CHAOSS About Page](https://chaoss.community/about-chaoss/):

  1. Moves the navigation buttons below the image for better visibility and a cleaner layout.
  2. Provides an alternative implementation using a carousel for a more interactive experience.

Changes Implemented

Option 1: Move Navigation Buttons Below the Image

  • Adjusted the layout to place the previous/next buttons under the image.
  • Ensured a responsive and visually appealing alignment using CSS.

Option 2: Replace Buttons with a Carousel

  • Implemented a dynamic image carousel using Swiper.js (or another library).
  • Allows users to smoothly navigate through images via swipe or arrow controls.

Why These Changes?

🔹 Improves user experience by making navigation more intuitive.
🔹 Enhances accessibility by ensuring buttons are more noticeable.
🔹 The carousel provides a modern alternative for engaging UI interactions.

Next Steps

  • Open to feedback on which approach the CHAOSS team prefers.
  • If the carousel is chosen, additional styling and optimizations can be applied.

adityajha2005 avatar Feb 27 '25 20:02 adityajha2005

Hi @adityajha2005! Thanks for digging into this! We are using Wordpress as our website framework, so these would have to be changes made through the admin interface. Based on your recommendations, I will take a look to see what we can easily do within our theme. I appreciate the thoroughness with which you explored this!

ElizabethN avatar Mar 19 '25 19:03 ElizabethN