diff --git a/components/application/carousel/carousel-base.tsx b/components/application/carousel/carousel-base.tsx
index 2073b6b..ffddd0e 100644
--- a/components/application/carousel/carousel-base.tsx
+++ b/components/application/carousel/carousel-base.tsx
@@ -109,12 +109,8 @@ const CarouselRoot = ({ orientation = "horizontal", opts, setApi, plugins, class
         [scrollPrev, scrollNext],
     );
 
-    useEffect(() => {
-        if (!api || !setApi) return;
-
-        setApi(api);
-    }, [api, setApi]);
-
+    // Subscribe before handing the api to setApi: effects run in order, so a consumer that
+    // scrolls as soon as it gets the api must find these listeners already attached.
     useEffect(() => {
         if (!api) return;
 
@@ -129,6 +125,12 @@ const CarouselRoot = ({ orientation = "horizontal", opts, setApi, plugins, class
         };
     }, [api, onInit, onSelect]);
 
+    useEffect(() => {
+        if (!api || !setApi) return;
+
+        setApi(api);
+    }, [api, setApi]);
+
     return (
         <CarouselContext.Provider
             value={{