fixed

Priyaaa1 · Aug 10, 2024 · c8f0489 · c8f0489
1 parent bc56f0a
commit c8f0489
Showing 1 changed file with 45 additions and 17 deletions.
diff --git a/src/Components/Testimonials/Testimonials.jsx b/src/Components/Testimonials/Testimonials.jsx
@@ -8,32 +8,60 @@ function Testimonials() {
   const cardTheme = useSelector((state) => state.theme.value) ? "cardTheme-dark" : "light";
   const carouselRef = useRef(null);
 
-  const scrollCarousel = (direction) => {
+  useEffect(() => {
     const carousel = carouselRef.current;
-    const cardWidth = carousel.querySelector(".card").offsetWidth;
+    const items = Array.from(carousel.children);
 
-    const scrollAmount = direction === "left" ? -cardWidth : cardWidth;
+    // Clone items for infinite scroll
+    items.forEach(item => {
+      const clone = item.cloneNode(true);
+      carousel.appendChild(clone);
+    });
 
-    if (
-      direction === "right" &&
-      carousel.scrollLeft + carousel.offsetWidth >= carousel.scrollWidth - cardWidth
-    ) {
-      carousel.scrollLeft = 0;
-    } else if (direction === "left" && carousel.scrollLeft <= 0) {
-      carousel.scrollLeft = carousel.scrollWidth - carousel.offsetWidth;
-    } else {
-      carousel.scrollLeft += scrollAmount;
-    }
-  };
+    // Adjust scroll position
+    const adjustScroll = () => {
+      carousel.scrollLeft = carousel.scrollWidth / 2;
+    };
+
+    adjustScroll();
 
-  useEffect(() => {
     const autoSlideInterval = setInterval(() => {
-      scrollCarousel("right");
+      const cardWidth = carousel.querySelector(".card").offsetWidth;
+      const maxScrollLeft = carousel.scrollWidth - carousel.clientWidth;
+
+      if (carousel.scrollLeft + carousel.clientWidth >= maxScrollLeft) {
+        carousel.scrollLeft = carousel.scrollWidth / 2 - cardWidth; // Smooth transition
+      } else {
+        carousel.scrollLeft += cardWidth;
+      }
     }, 3000);
 
-    return () => clearInterval(autoSlideInterval);
+    const handleScroll = () => {
+      const cardWidth = carousel.querySelector(".card").offsetWidth;
+      const maxScrollLeft = carousel.scrollWidth / 2 - cardWidth;
+
+      if (carousel.scrollLeft <= 0) {
+        carousel.scrollLeft = carousel.scrollWidth / 2;
+      } else if (carousel.scrollLeft >= maxScrollLeft) {
+        carousel.scrollLeft = 0;
+      }
+    };
+
+    carousel.addEventListener('scroll', handleScroll);
+    return () => {
+      clearInterval(autoSlideInterval);
+      carousel.removeEventListener('scroll', handleScroll);
+    };
   }, []);
 
+  const scrollCarousel = (direction) => {
+    const carousel = carouselRef.current;
+    const cardWidth = carousel.querySelector(".card").offsetWidth;
+    const scrollAmount = direction === "left" ? -cardWidth : cardWidth;
+
+    carousel.scrollLeft += scrollAmount;
+  };
+
   return (
     <>
       <div className={`wrapper ${theme}`} id="testimonials">