[DESIGN]: Pause venue carousel sliding on hover #830
Description
Describe the Issue
The venue card carousel on the homepage ("AsyncAPI Conference on Tour 2025") slides automatically. When a user tries to read the details on a card by hovering their mouse over it, the carousel continues to slide. This moves the card out from under the user's cursor, which is a frustrating and poor user experience.
Expected Outcome
The carousel's automatic sliding should pause when the user's mouse cursor hovers over any part of the carousel (a specific card or the container).
When the mouse cursor moves off the carousel, the automatic sliding should resume.
This allows users to inspect venue cards at their own pace without the content moving.
Screenshots
Steps to Reproduce
- Open the conference website homepage.
- Scroll down to the "AsyncAPI Conference on Tour 2025" section to find the venue carousel.
- Hover your mouse cursor over one of the venue cards (e.g., "Singapore").
- See the Result: The carousel continues to slide, and the card moves away.
Browser/Device
All desktop browsers (Chrome, Firefox, Safari, Edge). This is primarily a mouse/hover interaction issue.
Additional Notes
This is a common usability feature for carousels. Based on the file components/Slider/slider.tsx, the site uses react-slick. This can likely be fixed by adding the pauseOnHover: true prop to the slider's settings.
Check Before Submitting
- I have looked for similar issues to avoid duplicates.
- I have reviewed the Contributing Guidelines.
Would you like to help fix this issue? (Not required, but appreciated!)
- Yes, I am interested in contributing to the fix.