✨ Allow the carousel to be scrollable via wheel gestures

Author: Zeta611

bun.lock

@@ -2,6 +2,7 @@
 
 import { useRef, useState, useEffect, useCallback } from "react";
 import Autoplay from "embla-carousel-autoplay";
+import WheelGestures from "embla-carousel-wheel-gestures";
 import { Sparkles } from "lucide-react";
 import {
   Carousel,
@@ -25,14 +26,16 @@ export type FeaturedJargonCarouselItem = {
   comment_count: number;
 };
 
+const autoplayPlugin = Autoplay({ delay: 2000, stopOnInteraction: true });
+const wheelGesturesPlugin = WheelGestures({ forceWheelAxis: "x" });
+
 export default function FeaturedJargonCarousel({
   featuredJargons,
   className,
 }: {
   featuredJargons: FeaturedJargonCarouselItem[];
   className?: string;
 }) {
-  const plugin = useRef(Autoplay({ delay: 2000, stopOnInteraction: true }));
   const [api, setApi] = useState<CarouselApi>();
   const [canScrollPrev, setCanScrollPrev] = useState(false);
   const [canScrollNext, setCanScrollNext] = useState(false);
@@ -130,10 +133,10 @@ export default function FeaturedJargonCarousel({
         </h2>
         <Carousel
           setApi={setApi}
-          plugins={[plugin.current]}
+          plugins={[autoplayPlugin, wheelGesturesPlugin]}
           className="relative w-full"
-          onMouseEnter={plugin.current.stop}
-          onMouseLeave={plugin.current.reset}
+          onMouseEnter={autoplayPlugin.stop}
+          onMouseLeave={autoplayPlugin.reset}
         >
           {/* Left fade overlay */}
           {canScrollPrev && (

components/home/featured-jargon-carousel.tsx

@@ -38,6 +38,7 @@
     "dayjs": "^1.11.13",
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
+    "embla-carousel-wheel-gestures": "^8.1.0",
     "fast-deep-equal": "^3.1.3",
     "lucide-react": "^0.539.0",
     "match-sorter": "^8.1.0",