fix: step logic

pstachula-dev · Jul 14, 2024 · 4af56f4 · 4af56f4
1 parent f507828
commit 4af56f4
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 12 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -17,10 +17,9 @@ function App() {
         <CarouselProvider
           autoPlayDelay={2000}
           autoPlay={false}
-          slidesVisible={1}
-          lazy
+          slidesVisible={2}
           infinite
-          step={1}
+          step={2}
           total={5}
         >
           <Carousel>

diff --git a/src/lib/simple-headless-carousel/components/Carousel.tsx b/src/lib/simple-headless-carousel/components/Carousel.tsx
@@ -50,6 +50,7 @@ export const Carousel = memo(
       currentIndex,
       infinite,
       threshold,
+      step,
       disableTouch,
     } = state;
     const totalWidth = (fullSize * total) / slidesVisible;
@@ -60,24 +61,29 @@ export const Carousel = memo(
     };
 
     const setCurrentIndex = useCallback(
+
+
+
       (value: number) => {
         dispatch({ action: 'setCurrentIndex', value });
       },
       [dispatch],
     );
 
     const setTranslateX = useCallback(
-      (x: number) => {
+      (diffX: number) => {
+        // diffX = X%
+        // fullSize = 100%(fullSize)
         animationRef.current = requestAnimationFrame(() => {
-          const percentX = (x * fullSize) / width / total / slidesVisible;
+          const percentX = (diffX * fullSize) / width / total;
 
           imgRef.current?.style.setProperty(
             'transform',
             `translateX(${percentX}%)`,
           );
         });
       },
-      [width, total, slidesVisible],
+      [width, total],
     );
 
     const onMoveStart = useCallback((event: SlideEvent) => {
@@ -125,7 +131,10 @@ export const Carousel = memo(
       let finalIndex = currentIndex;
 
       if (moveCache.current.clientX !== 0) {
-        const steps = Math.ceil(Math.abs(moveCache.current.clientX) / width);
+        const dragSteps = Math.ceil(
+          Math.abs(moveCache.current.clientX) / width,
+        );
+        const steps = dragSteps > step ? dragSteps : step;
         const newIndex = moveCache.current.moveRight
           ? currentIndex - steps
           : currentIndex + steps;
@@ -144,7 +153,15 @@ export const Carousel = memo(
       setIsMoving(true);
       setTranslateX(-width * finalIndex);
       setCurrentIndex(finalIndex);
-    }, [setCurrentIndex, setTranslateX, currentIndex, infinite, total, width]);
+    }, [
+      setCurrentIndex,
+      setTranslateX,
+      currentIndex,
+      infinite,
+      total,
+      step,
+      width,
+    ]);
 
     const eventsMap = useMemo(
       (): EventMap => ({

diff --git a/src/lib/simple-headless-carousel/components/DotsGroup.tsx b/src/lib/simple-headless-carousel/components/DotsGroup.tsx
@@ -30,19 +30,18 @@ export const DotsGroup = memo(
   }: DotsGroupProps) => {
     const id = useId();
     const { state } = useContext(CarouselContext);
-    const { total, slidesVisible } = state;
-    const dotsLength = total / slidesVisible;
+    const { total } = state;
 
     return (
       <div className={clsx('flex gap-2', className)}>
-        {Array.from({ length: dotsLength }).map((_, idx) => (
+        {Array.from({ length: total }).map((_, idx) => (
           <Dot
             className={dotClassName}
             colorActive={colorActive}
             colorInactive={colorInactive}
             onClick={onClick}
             key={id + idx}
-            index={idx * slidesVisible}
+            index={idx}
           />
         ))}
       </div>