feat: wheel for carousel

kopexa-grc · Feb 13, 2025 · cb831d6 · cb831d6
1 parent 6d04966
commit cb831d6
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "clsx": "^2.1.1",
     "cross-env": "^7.0.3",
     "embla-carousel-react": "^8.5.2",
+    "embla-carousel-wheel-gestures": "^8.0.1",
     "graphql": "^16.8.1",
     "lexical": "0.20.0",
     "lucide-react": "^0.469.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/ui/carousel/carousel.tsx b/src/components/ui/carousel/carousel.tsx
@@ -14,6 +14,7 @@ import {
 } from "react";
 import { buttonVariants } from "../button";
 import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures";
 
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
@@ -56,7 +57,7 @@ export const CarouselRoot = ({
   orientation = "horizontal",
   opts,
   setApi,
-  plugins,
+  plugins = [],
   className,
   children,
   ...props
@@ -66,7 +67,7 @@ export const CarouselRoot = ({
       ...opts,
       axis: orientation === "horizontal" ? "x" : "y",
     },
-    plugins
+    [WheelGesturesPlugin(), ...plugins]
   );
   const [canScrollPrev, setCanScrollPrev] = useState(false);
   const [canScrollNext, setCanScrollNext] = useState(false);