Carousel: Enable dynamic autoplayInterval (microsoft#34142)

Author: Mitch-At-Work

change/@fluentui-react-carousel-da58b311-fa0d-4937-a70c-5d21bbe27170.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Stop and reinitialize autoplay on carousel when autoplay interval changes",
+  "packageName": "@fluentui/react-carousel",
+  "email": "mifraser@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-carousel/library/src/components/useEmblaCarousel.ts

@@ -229,6 +229,8 @@ export function useEmblaCarousel(
         // Use direct viewport if available, else fallback to container (includes Carousel controls).
         currentElement = viewportRef.current ?? newElement;
         if (currentElement) {
+          // Stop autoplay before reinitializing.
+          emblaApi.current?.plugins?.().autoplay?.stop();
           emblaApi.current = EmblaCarousel(
             currentElement,
             {
@@ -291,6 +293,8 @@ export function useEmblaCarousel(
       duration: motionDuration,
     };
 
+    // Stop autoplay before reinitializing.
+    emblaApi.current?.plugins?.().autoplay?.stop();
     emblaApi.current?.reInit(
       {
         ...DEFAULT_EMBLA_OPTIONS,