Improve Image Navigation: Move Buttons Below or Replace with Carousel
Description
Already started working on this issue and would love to create a PR if assigned.
Summary
This PR introduces two improvements for the image navigation on the [CHAOSS About Page](https://chaoss.community/about-chaoss/):
- Moves the navigation buttons below the image for better visibility and a cleaner layout.
- 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.
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!