feat: add auto-play and pause on hover to hero banner carousel

[Pranav-IIITM]

Summary

The hero banner carousel previously required manual interaction via arrow buttons to navigate between slides. This PR adds auto-play functionality, making the banner dynamic and engaging without requiring any user interaction.

Closes #321

Changes Made

src/components/slider/index.js

• Added useRef to hold a reference to the setInterval instance
• Added isHovered state to track mouse position over the banner
• Implemented setInterval calling slickNext() every 5000ms to auto-advance slides
• Added onMouseEnter handler to pause auto-play on hover
• Added onMouseLeave handler to resume auto-play on mouse leave
• Added useEffect cleanup to clear the interval on component unmount
• Retained all existing manual arrow navigation logic and slider settings intact

Before & After

Before

Kmesh-Video.1.mp4

After

Kmesh-Autoplay.video.1.mp4

Acceptance Criteria

• Slides auto-advance every 5 seconds
• Auto-play pauses when the user hovers over the banner
• Auto-play resumes when the user moves the cursor away
• Loops back to the first slide after the last one
• No memory leaks — interval is properly cleared on component unmount
• Existing manual arrow navigation works as expected

[netlify]

✅ Deploy Preview for kmesh-net ready!

Name	Link
🔨 Latest commit	6d9f60f
🔍 Latest deploy log	https://app.netlify.com/projects/kmesh-net/deploys/6a410f7d8d9f27000877f283
😎 Deploy Preview	https://deploy-preview-322--kmesh-net.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[kmesh-bot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign yaozengzeng for approval. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[gemini-code-assist]

Code Review

This pull request introduces custom autoplay and pause-on-hover functionality to the home slider using React hooks (useState, useEffect, useRef) and mouse event handlers. The reviewer recommends removing this custom implementation and instead utilizing the native autoplay, autoplaySpeed, and pauseOnHover properties provided by the react-slick library, which simplifies the component and removes unnecessary state management.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[Copilot]

Pull request overview

This PR adds auto-play behavior to the home page hero banner carousel, advancing slides automatically every 5 seconds and pausing while the user hovers over the banner.

Changes:

• Introduces a timer-driven auto-advance via setInterval() calling slickNext() every 5000ms
• Adds hover tracking to pause/resume the auto-play behavior
• Wires a ref into react-slick’s <Slider /> instance so it can be advanced programmatically

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Pranav-IIITM]

@LiZhenCheng9527 @nlgwcy Please review the PR !!

[yashisrani]

/lgtm