From 6d9f60f00fe98eb1fc1860080d259ec944d358e4 Mon Sep 17 00:00:00 2001
From: Pranav-IIITM <jogdandpranav2007@gmail.com>
Date: Sun, 28 Jun 2026 17:36:51 +0530
Subject: [PATCH] feat: add auto-play and pause on hover to hero banner
 carousel

Signed-off-by: Pranav-IIITM <jogdandpranav2007@gmail.com>
---
 src/components/slider/index.js | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/slider/index.js b/src/components/slider/index.js
index e07c6e380..a8d9b2d30 100644
--- a/src/components/slider/index.js
+++ b/src/components/slider/index.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import clsx from "clsx";
 import Slider from "react-slick";
 import Translate from "@docusaurus/Translate";
@@ -80,6 +80,25 @@ const SlideItem = (props) => {
 };
 
 export const HomeSlider = () => {
+  const sliderRef = useRef(null);
+  const [isHovered, setIsHovered] = useState(false);
+
+  useEffect(() => {
+    let interval;
+    if (!isHovered) {
+      interval = setInterval(() => {
+        if (sliderRef.current) {
+          sliderRef.current.slickNext();
+        }
+      }, 5000);
+    }
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [isHovered]);
+
   const settings = {
     dots: true,
     infinite: true,
@@ -89,8 +108,12 @@ export const HomeSlider = () => {
   };
 
   return (
-    <div className={"slider-container"}>
-      <Slider {...settings}>
+    <div 
+      className={"slider-container"}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <Slider ref={sliderRef} {...settings}>
         {sliderItems.map((i, index) => (
           <SlideItem key={index} {...i} />
         ))}