Implemented automatic cycling carousel for upcoming events section with
smooth slide-up transitions, showing one event at a time.
Features:
- Current events: Show all at once (unchanged)
- Upcoming events: Cycle through one at a time
- 5-second display time per event
- 0.8-second smooth slide-up transition
- Current event slides up and fades out
- Next event slides up from bottom and fades in
- Loops continuously through all upcoming events
- Only one upcoming event visible at a time
Implementation:
- Added carousel CSS with position-based transitions
- Three states: active (visible), exit-up (sliding out), enter-down (waiting)
- JavaScript interval rotates events every 5 seconds
- Automatically starts/stops based on number of upcoming events
- Pauses when page is hidden (tab switching)
- Responsive to all screen sizes (720p, 1080p, 4K)
Benefits:
- Saves screen space
- Each upcoming event gets dedicated visibility
- Clean, professional transition effect
- No competing for attention in grid layout
- Better readability for shop floor displays
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
ea3442c9db
