From d47c023728c06ab8e0bfdd3cefd66a01f405ec45 Mon Sep 17 00:00:00 2001
From: J Shiva Shankar <144578658+STXRSHIVA@users.noreply.github.com>
Date: Sun, 20 Oct 2024 16:30:09 +0530
Subject: [PATCH] improved carousal

---
 frontend/src/components/ui/ReviewCarousel.jsx | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/ui/ReviewCarousel.jsx b/frontend/src/components/ui/ReviewCarousel.jsx
index b7f0699b..c2e14b44 100644
--- a/frontend/src/components/ui/ReviewCarousel.jsx
+++ b/frontend/src/components/ui/ReviewCarousel.jsx
@@ -71,15 +71,16 @@ const ReviewCarousel = () => {
 
   const nextSlide = () => {
     setCurrentIndex((prevIndex) =>
-      prevIndex === reviews.length - 4 ? 0 : prevIndex + 1
+      prevIndex === reviews.length - 6 ? 0 : prevIndex + 1
     );
   };
 
   const prevSlide = () => {
     setCurrentIndex((prevIndex) =>
-      prevIndex === 0 ? reviews.length - 4 : prevIndex - 1
+      prevIndex === 0 ? reviews.length - 6 : prevIndex - 1
     );
   };
+
   const [cardsToShow, setCardsToShow] = useState(1);
 
   const updateCardsToShow = () => {
@@ -94,7 +95,10 @@ const ReviewCarousel = () => {
     updateCardsToShow();
     window.addEventListener('resize', updateCardsToShow);
 
+    const intervalId = setInterval(nextSlide, 3000); // Change slide every 3 seconds
+
     return () => {
+      clearInterval(intervalId); // Cleanup interval on unmount
       window.removeEventListener('resize', updateCardsToShow);
     };
   }, []);
@@ -107,8 +111,8 @@ const ReviewCarousel = () => {
         </h1>
       </div>
 
-      <div className="bg-[#004D43] h-full p-4 md:p-20 items-center justify-center flex relative ">
-        <div className="w-full overflow-x-auto max-w-7xl md:overflow-hidden ">
+      <div className="bg-[#004D43] h-full p-4 md:p-20 items-center justify-center flex relative">
+        <div className="w-full overflow-x-auto max-w-7xl md:overflow-hidden">
           <div
             className="flex transition-transform duration-300 ease-in-out"
             style={{
@@ -123,11 +127,6 @@ const ReviewCarousel = () => {
               >
                 <div className="relative min-h-[250px] max-h-[350px] md:min-h-[300px] md:max-h-[400px] p-4 rounded-xl bg-amber-200 z-10 overflow-hidden">
                   <div className="flex flex-col items-center justify-center mb-1">
-                    {/* <img
-                      src={review.img}
-                      alt=""
-                      className="w-20 h-20 rounded-full"
-                    /> */}
                     <LazyLoadImage
                       alt={`${index}img`}
                       effect="blur"
@@ -170,7 +169,7 @@ const ReviewCarousel = () => {
           <>
             <button
               onClick={prevSlide}
-              className="absolute hidden p-2  transform -translate-y-1/2 bg-white rounded-full md:block left-10 top-1/2"
+              className="absolute hidden p-2 transform -translate-y-1/2 bg-white rounded-full md:block left-10 top-1/2"
             >
               <MdArrowBackIos className="text-[#004D43]" size={18} />
             </button>