diff --git a/packages/react-components/react-carousel/library/etc/react-carousel.api.md b/packages/react-components/react-carousel/library/etc/react-carousel.api.md
index 64a67dd8f6e34..981198ec2ee4f 100644
--- a/packages/react-components/react-carousel/library/etc/react-carousel.api.md
+++ b/packages/react-components/react-carousel/library/etc/react-carousel.api.md
@@ -220,7 +220,7 @@ export type CarouselProps = ComponentProps<CarouselSlots> & {
 // @public (undocumented)
 export const CarouselProvider: Provider<CarouselContextValue | undefined> & FC<ProviderProps<CarouselContextValue | undefined>>;
 
-// @public @deprecated
+// @public
 export const CarouselSlider: ForwardRefComponent<CarouselSliderProps>;
 
 // @public (undocumented)
@@ -254,14 +254,11 @@ export const CarouselViewport: ForwardRefComponent<CarouselViewportProps>;
 export const carouselViewportClassNames: SlotClassNames<CarouselViewportSlots>;
 
 // @public
-export type CarouselViewportProps = ComponentProps<CarouselViewportSlots> & {
-    cardFocus?: boolean;
-};
+export type CarouselViewportProps = ComponentProps<CarouselViewportSlots>;
 
 // @public (undocumented)
 export type CarouselViewportSlots = {
     root: Slot<'div'>;
-    slider?: NonNullable<Slot<'div'>>;
 };
 
 // @public
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselCard/useCarouselCard.ts b/packages/react-components/react-carousel/library/src/components/CarouselCard/useCarouselCard.ts
index 8ee83a9ac0150..c91ea2a941d57 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselCard/useCarouselCard.ts
+++ b/packages/react-components/react-carousel/library/src/components/CarouselCard/useCarouselCard.ts
@@ -66,7 +66,7 @@ export const useCarouselCard_unstable = (
     }
   }, [cardFocus]);
 
-  const handleFocusCapture = React.useCallback(
+  const handleFocus = React.useCallback(
     (e: React.FocusEvent) => {
       if (!e.defaultPrevented && isHTMLElement(e.currentTarget) && !isMouseEvent.current) {
         // We want to prevent any browser scroll intervention for 'offscreen' focus
@@ -88,7 +88,7 @@ export const useCarouselCard_unstable = (
     }
   };
 
-  const onFocusCapture = mergeCallbacks(props.onFocusCapture, handleFocusCapture);
+  const onFocus = mergeCallbacks(props.onFocus, handleFocus);
   const onMouseUp = mergeCallbacks(props.onMouseUp, handleMouseUp);
   const onMouseDown = mergeCallbacks(props.onMouseDown, handleMouseDown);
   const state: CarouselCardState = {
@@ -103,7 +103,7 @@ export const useCarouselCard_unstable = (
         tabIndex: cardFocus ? 0 : undefined,
         ...props,
         id,
-        onFocusCapture,
+        onFocus,
         onMouseDown,
         onMouseUp,
         ...focusAttrProps,
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselSlider/CarouselSlider.test.tsx b/packages/react-components/react-carousel/library/src/components/CarouselSlider/CarouselSlider.test.tsx
index b128a67798dbb..6bbb6f73c27ab 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselSlider/CarouselSlider.test.tsx
+++ b/packages/react-components/react-carousel/library/src/components/CarouselSlider/CarouselSlider.test.tsx
@@ -5,13 +5,11 @@ import { CarouselSlider } from './CarouselSlider';
 
 describe('CarouselSlider', () => {
   isConformant({
-    // eslint-disable-next-line deprecation/deprecation
     Component: CarouselSlider,
     displayName: 'CarouselSlider',
   });
 
   it('renders a default state', () => {
-    // eslint-disable-next-line deprecation/deprecation
     const result = render(<CarouselSlider>Default CarouselSlider</CarouselSlider>);
     expect(result.container).toMatchSnapshot();
   });
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselSlider/CarouselSlider.tsx b/packages/react-components/react-carousel/library/src/components/CarouselSlider/CarouselSlider.tsx
index a03cc4b4ff753..43048754edf20 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselSlider/CarouselSlider.tsx
+++ b/packages/react-components/react-carousel/library/src/components/CarouselSlider/CarouselSlider.tsx
@@ -9,9 +9,6 @@ import { useCarouselSliderContextValues_unstable } from './CarouselSliderContext
 
 /**
  * CarouselSlider component - The viewport window that CarouselCards are contained within.
- *
- * @deprecated use CarouselViewport instead
- * @see CarouselViewport
  */
 export const CarouselSlider: ForwardRefComponent<CarouselSliderProps> = React.forwardRef((props, ref) => {
   const state = useCarouselSlider_unstable(props, ref);
@@ -25,5 +22,4 @@ export const CarouselSlider: ForwardRefComponent<CarouselSliderProps> = React.fo
   return renderCarouselSlider_unstable(state, context);
 });
 
-// eslint-disable-next-line deprecation/deprecation
 CarouselSlider.displayName = 'CarouselSlider';
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselSlider/useCarouselSliderStyles.styles.ts b/packages/react-components/react-carousel/library/src/components/CarouselSlider/useCarouselSliderStyles.styles.ts
index 85f0ea1ec9c56..fc80602920bad 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselSlider/useCarouselSliderStyles.styles.ts
+++ b/packages/react-components/react-carousel/library/src/components/CarouselSlider/useCarouselSliderStyles.styles.ts
@@ -22,7 +22,6 @@ const useStyles = makeStyles({
  */
 export const useCarouselSliderStyles_unstable = (state: CarouselSliderState): CarouselSliderState => {
   'use no memo';
-  const { cardFocus } = state;
 
   const styles = useStyles();
 
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselViewport/CarouselViewport.types.ts b/packages/react-components/react-carousel/library/src/components/CarouselViewport/CarouselViewport.types.ts
index 7198053f24cc2..5f1091dbcfbb4 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselViewport/CarouselViewport.types.ts
+++ b/packages/react-components/react-carousel/library/src/components/CarouselViewport/CarouselViewport.types.ts
@@ -6,27 +6,12 @@ export type CarouselViewportSlots = {
    * The viewport outer container, defining the size of the carousels visible and interactable area
    */
   root: Slot<'div'>;
-
-  /**
-   * The slider used for animating carousel movement
-   */
-  slider?: NonNullable<Slot<'div'>>;
 };
 
 /**
  * CarouselViewport Props
  */
-export type CarouselViewportProps = ComponentProps<CarouselViewportSlots> & {
-  /**
-   * cardFocus sets the carousel slider as a focus group,
-   * enabling left/right navigation of elements.
-   *
-   * This will also be passed into CarouselCards via context and set the appropriate focus attributes
-   *
-   * Defaults: false
-   */
-  cardFocus?: boolean;
-};
+export type CarouselViewportProps = ComponentProps<CarouselViewportSlots>;
 
 /**
  * State used in rendering CarouselViewport
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselViewport/renderCarouselViewport.tsx b/packages/react-components/react-carousel/library/src/components/CarouselViewport/renderCarouselViewport.tsx
index 357f53c9ab943..6a1ea00c25ffd 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselViewport/renderCarouselViewport.tsx
+++ b/packages/react-components/react-carousel/library/src/components/CarouselViewport/renderCarouselViewport.tsx
@@ -16,9 +16,7 @@ export const renderCarouselViewport_unstable = (
 
   return (
     <CarouselSliderContextProvider value={contextValues.carouselSlider}>
-      <state.root>
-        <state.slider />
-      </state.root>
+      <state.root />
     </CarouselSliderContextProvider>
   );
 };
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselViewport/useCarouselViewport.ts b/packages/react-components/react-carousel/library/src/components/CarouselViewport/useCarouselViewport.ts
index ba94ac1b009a7..b04c25996074d 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselViewport/useCarouselViewport.ts
+++ b/packages/react-components/react-carousel/library/src/components/CarouselViewport/useCarouselViewport.ts
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';
 import type { CarouselViewportProps, CarouselViewportState } from './CarouselViewport.types';
 import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
-import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 
 /**
  * Create the state required to render CarouselViewport.
@@ -17,45 +16,19 @@ export const useCarouselViewport_unstable = (
   props: CarouselViewportProps,
   ref: React.Ref<HTMLDivElement>,
 ): CarouselViewportState => {
-  const { cardFocus = false } = props;
-  const circular = useCarouselContext(ctx => ctx.circular);
   const viewportRef = useCarouselContext(ctx => ctx.viewportRef);
-  const focusableGroupAttr = useArrowNavigationGroup({
-    circular,
-    axis: 'horizontal',
-    memorizeCurrent: false,
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    unstable_hasDefault: true,
-  });
-
-  const focusProps = cardFocus ? focusableGroupAttr : {};
-
-  const slider: CarouselViewportState['slider'] = slot.always(props.slider, {
-    defaultProps: {
-      role: 'group',
-      children: props.children,
-      ...focusProps,
-    },
-    elementType: 'div',
-  });
-
-  const mergedViewportRef = useMergedRefs(ref, viewportRef);
 
   return {
-    slider,
-    cardFocus,
     components: {
       root: 'div',
-      slider: 'div',
     },
     root: slot.always(
       getIntrinsicElementProps('div', {
-        ref: mergedViewportRef,
+        ref: useMergedRefs(ref, viewportRef),
         role: 'presentation',
         // Draggable ensures dragging is supported (even if not enabled)
         draggable: true,
         ...props,
-        children: null,
       }),
       { elementType: 'div' },
     ),
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselViewport/useCarouselViewportStyles.styles.ts b/packages/react-components/react-carousel/library/src/components/CarouselViewport/useCarouselViewportStyles.styles.ts
index 19594e122b38f..60846674e3393 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselViewport/useCarouselViewportStyles.styles.ts
+++ b/packages/react-components/react-carousel/library/src/components/CarouselViewport/useCarouselViewportStyles.styles.ts
@@ -4,7 +4,6 @@ import type { CarouselViewportSlots, CarouselViewportState } from './CarouselVie
 
 export const carouselViewportClassNames: SlotClassNames<CarouselViewportSlots> = {
   root: 'fui-CarouselViewport',
-  slider: 'fui-CarouselViewport__slider',
 };
 
 /**
@@ -29,7 +28,6 @@ export const useCarouselViewportStyles_unstable = (state: CarouselViewportState)
 
   const styles = useStyles();
   state.root.className = mergeClasses(carouselViewportClassNames.root, styles.root, state.root.className);
-  state.slider.className = mergeClasses(carouselViewportClassNames.slider, styles.slider, state.slider.className);
 
   return state;
 };
diff --git a/packages/react-components/react-carousel/library/src/index.ts b/packages/react-components/react-carousel/library/src/index.ts
index 1d369e67302b2..7bd893c927abf 100644
--- a/packages/react-components/react-carousel/library/src/index.ts
+++ b/packages/react-components/react-carousel/library/src/index.ts
@@ -63,7 +63,6 @@ export {
   useCarouselNavImageButton_unstable,
 } from './CarouselNavImageButton';
 export {
-  // eslint-disable-next-line deprecation/deprecation
   CarouselSlider,
   carouselSliderClassNames,
   renderCarouselSlider_unstable,
diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselActionCards.stories.tsx b/packages/react-components/react-carousel/stories/src/Carousel/CarouselActionCards.stories.tsx
index 707005462464b..7c97d73aec099 100644
--- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselActionCards.stories.tsx
+++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselActionCards.stories.tsx
@@ -8,6 +8,7 @@ import {
   Option,
   Switch,
   Field,
+  CarouselSlider,
 } from '@fluentui/react-components';
 import { MoreHorizontalRegular, DocumentLinkRegular } from '@fluentui/react-icons';
 import {
@@ -199,10 +200,12 @@ export const AlignmentAndWhitespace = () => {
 
       <div className={classes.card}>
         <Carousel align={alignment} className={classes.carousel} whitespace={whitespace} announcement={getAnnouncement}>
-          <CarouselViewport cardFocus={true}>
-            {POSTS.map((post, index) => (
-              <ActionCard {...post} key={post.name} index={index} />
-            ))}
+          <CarouselViewport>
+            <CarouselSlider cardFocus>
+              {POSTS.map((post, index) => (
+                <ActionCard {...post} key={post.name} index={index} />
+              ))}
+            </CarouselSlider>
           </CarouselViewport>
           <CarouselNavContainer
             layout="inline"
diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselAutoplay.stories.tsx b/packages/react-components/react-carousel/stories/src/Carousel/CarouselAutoplay.stories.tsx
index d515762fb1b69..68b3da1dcea31 100644
--- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselAutoplay.stories.tsx
+++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselAutoplay.stories.tsx
@@ -1,4 +1,13 @@
-import { Button, Field, Image, makeStyles, Switch, tokens, typographyStyles } from '@fluentui/react-components';
+import {
+  Button,
+  CarouselSlider,
+  Field,
+  Image,
+  makeStyles,
+  Switch,
+  tokens,
+  typographyStyles,
+} from '@fluentui/react-components';
 import {
   Carousel,
   CarouselAnnouncerFunction,
@@ -148,11 +157,13 @@ export const Autoplay = () => {
       <div className={classes.card}>
         <Carousel groupSize={1} circular announcement={getAnnouncement}>
           <CarouselViewport>
-            {IMAGES.map((imageSrc, index) => (
-              <BannerCard key={`image-${index}`} imageSrc={imageSrc} index={index}>
-                Card {index + 1}
-              </BannerCard>
-            ))}
+            <CarouselSlider>
+              {IMAGES.map((imageSrc, index) => (
+                <BannerCard key={`image-${index}`} imageSrc={imageSrc} index={index}>
+                  Card {index + 1}
+                </BannerCard>
+              ))}
+            </CarouselSlider>
           </CarouselViewport>
           <CarouselNavContainer
             layout="inline"
diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselControlled.stories.tsx b/packages/react-components/react-carousel/stories/src/Carousel/CarouselControlled.stories.tsx
index f2ea2ce95af43..8080d76da3606 100644
--- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselControlled.stories.tsx
+++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselControlled.stories.tsx
@@ -8,6 +8,7 @@ import {
   Tooltip,
   Toolbar,
   ToolbarButton,
+  CarouselSlider,
 } from '@fluentui/react-components';
 import {
   Carousel,
@@ -134,21 +135,23 @@ export const Controlled = () => {
         </Tooltip>
 
         <CarouselViewport className={classes.viewport}>
-          <CarouselCard aria-label="1 of 5">
-            <WireframeContent index={0} />
-          </CarouselCard>
-          <CarouselCard aria-label="2 of 5">
-            <WireframeContent index={1} />
-          </CarouselCard>
-          <CarouselCard aria-label="3 of 5">
-            <WireframeContent index={2} />
-          </CarouselCard>
-          <CarouselCard aria-label="4 of 5">
-            <WireframeContent index={3} />
-          </CarouselCard>
-          <CarouselCard aria-label="5 of 5">
-            <WireframeContent index={4} />
-          </CarouselCard>
+          <CarouselSlider>
+            <CarouselCard aria-label="1 of 5">
+              <WireframeContent index={0} />
+            </CarouselCard>
+            <CarouselCard aria-label="2 of 5">
+              <WireframeContent index={1} />
+            </CarouselCard>
+            <CarouselCard aria-label="3 of 5">
+              <WireframeContent index={2} />
+            </CarouselCard>
+            <CarouselCard aria-label="4 of 5">
+              <WireframeContent index={3} />
+            </CarouselCard>
+            <CarouselCard aria-label="5 of 5">
+              <WireframeContent index={4} />
+            </CarouselCard>
+          </CarouselSlider>
         </CarouselViewport>
 
         <Tooltip content="Go To Next Page" relationship="label">
diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselDefault.stories.tsx b/packages/react-components/react-carousel/stories/src/Carousel/CarouselDefault.stories.tsx
index 8f1dd9ad2dfbf..60d13fb018e91 100644
--- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselDefault.stories.tsx
+++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselDefault.stories.tsx
@@ -7,6 +7,7 @@ import {
   CarouselNavContainer,
   CarouselViewport,
   CarouselAnnouncerFunction,
+  CarouselSlider,
 } from '@fluentui/react-components';
 import * as React from 'react';
 
@@ -79,11 +80,13 @@ const getAnnouncement: CarouselAnnouncerFunction = (index: number, totalSlides:
 export const Default = () => (
   <Carousel groupSize={1} circular announcement={getAnnouncement}>
     <CarouselViewport>
-      {IMAGES.map((imageSrc, index) => (
-        <BannerCard key={`image-${index}`} imageSrc={imageSrc} index={index}>
-          Card {index + 1}
-        </BannerCard>
-      ))}
+      <CarouselSlider>
+        {IMAGES.map((imageSrc, index) => (
+          <BannerCard key={`image-${index}`} imageSrc={imageSrc} index={index}>
+            Card {index + 1}
+          </BannerCard>
+        ))}
+      </CarouselSlider>
     </CarouselViewport>
     <CarouselNavContainer
       layout="inline"
diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselEventing.stories.tsx b/packages/react-components/react-carousel/stories/src/Carousel/CarouselEventing.stories.tsx
index 2c7fd7c5f5b2d..81a150bb0ba3c 100644
--- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselEventing.stories.tsx
+++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselEventing.stories.tsx
@@ -7,6 +7,7 @@ import {
   Title1,
   Subtitle2,
   useId,
+  CarouselSlider,
 } from '@fluentui/react-components';
 import {
   Carousel,
@@ -155,51 +156,53 @@ export const Eventing = () => {
           setStatusLog(prev => [[Date.now(), { type: data.type, index: data.index }], ...prev]);
         }}
       >
-        <CarouselViewport cardFocus>
-          <CarouselCard className={classes.card} autoSize aria-label="1 of 7">
-            <WireframeContent appearance="odd">
-              <Title1 align="center">Lorem Ipsum</Title1>
-              <Body1 align="center">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...
-              </Body1>
-            </WireframeContent>
-          </CarouselCard>
-          <CarouselCard className={classes.card} autoSize aria-label="2 of 7">
-            <WireframeContent appearance="even" size="small">
-              <Subtitle2 align="center">Lorem Ipsum</Subtitle2>
-              <Caption1 align="center">Lorem ipsum...</Caption1>
-            </WireframeContent>
-          </CarouselCard>
-          <CarouselCard className={classes.card} autoSize aria-label="3 of 7">
-            <WireframeContent appearance="odd" size="medium">
-              <Title1 align="center">Lorem Ipsum</Title1>
-              <Caption1 align="center">Lorem ipsum dolor sit amet...</Caption1>
-            </WireframeContent>
-          </CarouselCard>
-          <CarouselCard className={classes.card} autoSize aria-label="4 of 7">
-            <WireframeContent appearance="even" size="large">
-              <Title1 align="center">Lorem Ipsum</Title1>
-              <Body1 align="center">Lorem ipsum dolor sit amet...</Body1>
-            </WireframeContent>
-          </CarouselCard>
-          <CarouselCard className={classes.card} autoSize aria-label="5 of 7">
-            <WireframeContent appearance="odd" size="medium">
-              <Title1 align="center">Lorem Ipsum</Title1>
-              <Caption1 align="center">Lorem ipsum dolor sit amet...</Caption1>
-            </WireframeContent>
-          </CarouselCard>
-          <CarouselCard className={classes.card} autoSize aria-label="6 of 7">
-            <WireframeContent appearance="even" size="large">
-              <Title1 align="center">Lorem Ipsum</Title1>
-              <Body1 align="center">Lorem ipsum dolor sit amet...</Body1>
-            </WireframeContent>
-          </CarouselCard>
-          <CarouselCard className={classes.card} autoSize aria-label="7 of 7">
-            <WireframeContent appearance="odd" size="small">
-              <Subtitle2 align="center">Lorem Ipsum</Subtitle2>
-              <Caption1 align="center">Lorem ipsum...</Caption1>
-            </WireframeContent>
-          </CarouselCard>
+        <CarouselViewport>
+          <CarouselSlider cardFocus>
+            <CarouselCard className={classes.card} autoSize aria-label="1 of 7">
+              <WireframeContent appearance="odd">
+                <Title1 align="center">Lorem Ipsum</Title1>
+                <Body1 align="center">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...
+                </Body1>
+              </WireframeContent>
+            </CarouselCard>
+            <CarouselCard className={classes.card} autoSize aria-label="2 of 7">
+              <WireframeContent appearance="even" size="small">
+                <Subtitle2 align="center">Lorem Ipsum</Subtitle2>
+                <Caption1 align="center">Lorem ipsum...</Caption1>
+              </WireframeContent>
+            </CarouselCard>
+            <CarouselCard className={classes.card} autoSize aria-label="3 of 7">
+              <WireframeContent appearance="odd" size="medium">
+                <Title1 align="center">Lorem Ipsum</Title1>
+                <Caption1 align="center">Lorem ipsum dolor sit amet...</Caption1>
+              </WireframeContent>
+            </CarouselCard>
+            <CarouselCard className={classes.card} autoSize aria-label="4 of 7">
+              <WireframeContent appearance="even" size="large">
+                <Title1 align="center">Lorem Ipsum</Title1>
+                <Body1 align="center">Lorem ipsum dolor sit amet...</Body1>
+              </WireframeContent>
+            </CarouselCard>
+            <CarouselCard className={classes.card} autoSize aria-label="5 of 7">
+              <WireframeContent appearance="odd" size="medium">
+                <Title1 align="center">Lorem Ipsum</Title1>
+                <Caption1 align="center">Lorem ipsum dolor sit amet...</Caption1>
+              </WireframeContent>
+            </CarouselCard>
+            <CarouselCard className={classes.card} autoSize aria-label="6 of 7">
+              <WireframeContent appearance="even" size="large">
+                <Title1 align="center">Lorem Ipsum</Title1>
+                <Body1 align="center">Lorem ipsum dolor sit amet...</Body1>
+              </WireframeContent>
+            </CarouselCard>
+            <CarouselCard className={classes.card} autoSize aria-label="7 of 7">
+              <WireframeContent appearance="odd" size="small">
+                <Subtitle2 align="center">Lorem Ipsum</Subtitle2>
+                <Caption1 align="center">Lorem ipsum...</Caption1>
+              </WireframeContent>
+            </CarouselCard>
+          </CarouselSlider>
         </CarouselViewport>
 
         <CarouselNavContainer
diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselFirstRunExperience.stories.tsx b/packages/react-components/react-carousel/stories/src/Carousel/CarouselFirstRunExperience.stories.tsx
index f996abeabee79..3087e6c4f73f3 100644
--- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselFirstRunExperience.stories.tsx
+++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselFirstRunExperience.stories.tsx
@@ -6,6 +6,7 @@ import {
   CarouselCard,
   CarouselNav,
   CarouselNavButton,
+  CarouselSlider,
   CarouselViewport,
   Dialog,
   DialogSurface,
@@ -103,15 +104,17 @@ export const FirstRunExperience = () => {
           onActiveIndexChange={(e, data) => setActiveIndex(data.index)}
         >
           <CarouselViewport>
-            {PAGES.map(page => (
-              <CarouselCard className={styles.card} key={page.id}>
-                <Image src={page.imgSrc} width={600} height={324} alt={page.imgSrc} />
-                <h1 tabIndex={-1} className={styles.header}>
-                  {page.header}
-                </h1>
-                <span className={styles.text}>{page.text}</span>
-              </CarouselCard>
-            ))}
+            <CarouselSlider>
+              {PAGES.map(page => (
+                <CarouselCard className={styles.card} key={page.id}>
+                  <Image src={page.imgSrc} width={600} height={324} alt={page.imgSrc} />
+                  <h1 tabIndex={-1} className={styles.header}>
+                    {page.header}
+                  </h1>
+                  <span className={styles.text}>{page.text}</span>
+                </CarouselCard>
+              ))}
+            </CarouselSlider>
           </CarouselViewport>
           <div className={styles.footer}>
             <Button onClick={() => setPage(activeIndex - 1)}>{activeIndex <= 0 ? 'Not Now' : 'Previous'}</Button>
diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselImageBox.stories.tsx b/packages/react-components/react-carousel/stories/src/Carousel/CarouselImageBox.stories.tsx
index ad60ff128a95a..59b36b8d3f1bc 100644
--- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselImageBox.stories.tsx
+++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselImageBox.stories.tsx
@@ -1,4 +1,4 @@
-import { makeStyles, Image } from '@fluentui/react-components';
+import { makeStyles, Image, CarouselSlider } from '@fluentui/react-components';
 import {
   Carousel,
   CarouselAnnouncerFunction,
@@ -72,11 +72,13 @@ export const ImageSlideshow = () => {
   return (
     <Carousel groupSize={1} align="center" announcement={getAnnouncement}>
       <CarouselViewport className={classes.slider}>
-        {IMAGES.map((image, index) => (
-          <CarouselCard key={image.url} className={classes.card} aria-label={`${index + 1} of ${IMAGES.length}`}>
-            <ImageCard {...image} />
-          </CarouselCard>
-        ))}
+        <CarouselSlider>
+          {IMAGES.map((image, index) => (
+            <CarouselCard key={image.url} className={classes.card} aria-label={`${index + 1} of ${IMAGES.length}`}>
+              <ImageCard {...image} />
+            </CarouselCard>
+          ))}
+        </CarouselSlider>
       </CarouselViewport>
 
       <CarouselNavContainer
diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselResponsive.stories.tsx b/packages/react-components/react-carousel/stories/src/Carousel/CarouselResponsive.stories.tsx
index d78f544bcae0c..2511c0339c48b 100644
--- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselResponsive.stories.tsx
+++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselResponsive.stories.tsx
@@ -1,4 +1,13 @@
-import { Body1, Caption1, makeStyles, mergeClasses, tokens, Title1, Subtitle2 } from '@fluentui/react-components';
+import {
+  Body1,
+  Caption1,
+  makeStyles,
+  mergeClasses,
+  tokens,
+  Title1,
+  Subtitle2,
+  CarouselSlider,
+} from '@fluentui/react-components';
 import {
   Carousel,
   CarouselAnnouncerFunction,
@@ -90,51 +99,53 @@ export const Responsive = () => {
 
   return (
     <Carousel draggable announcement={getAnnouncement}>
-      <CarouselViewport slider={{ className: classes.slider }}>
-        <CarouselCard autoSize aria-label="1 of 7">
-          <WireframeContent appearance="odd">
-            <Title1 align="center">Lorem Ipsum</Title1>
-            <Body1 align="center">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...
-            </Body1>
-          </WireframeContent>
-        </CarouselCard>
-        <CarouselCard autoSize aria-label="2 of 7">
-          <WireframeContent appearance="even" size="small">
-            <Subtitle2 align="center">Lorem Ipsum</Subtitle2>
-            <Caption1 align="center">Lorem ipsum...</Caption1>
-          </WireframeContent>
-        </CarouselCard>
-        <CarouselCard autoSize aria-label="3 of 7">
-          <WireframeContent appearance="odd" size="medium">
-            <Title1 align="center">Lorem Ipsum</Title1>
-            <Caption1 align="center">Lorem ipsum dolor sit amet...</Caption1>
-          </WireframeContent>
-        </CarouselCard>
-        <CarouselCard autoSize aria-label="4 of 7">
-          <WireframeContent appearance="even" size="large">
-            <Title1 align="center">Lorem Ipsum</Title1>
-            <Body1 align="center">Lorem ipsum dolor sit amet...</Body1>
-          </WireframeContent>
-        </CarouselCard>
-        <CarouselCard autoSize aria-label="5 of 7">
-          <WireframeContent appearance="odd" size="medium">
-            <Title1 align="center">Lorem Ipsum</Title1>
-            <Caption1 align="center">Lorem ipsum dolor sit amet...</Caption1>
-          </WireframeContent>
-        </CarouselCard>
-        <CarouselCard autoSize aria-label="6 of 7">
-          <WireframeContent appearance="even" size="large">
-            <Title1 align="center">Lorem Ipsum</Title1>
-            <Body1 align="center">Lorem ipsum dolor sit amet...</Body1>
-          </WireframeContent>
-        </CarouselCard>
-        <CarouselCard autoSize aria-label="7 of 7">
-          <WireframeContent appearance="odd" size="small">
-            <Subtitle2 align="center">Lorem Ipsum</Subtitle2>
-            <Caption1 align="center">Lorem ipsum...</Caption1>
-          </WireframeContent>
-        </CarouselCard>
+      <CarouselViewport>
+        <CarouselSlider className={classes.slider}>
+          <CarouselCard autoSize aria-label="1 of 7">
+            <WireframeContent appearance="odd">
+              <Title1 align="center">Lorem Ipsum</Title1>
+              <Body1 align="center">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...
+              </Body1>
+            </WireframeContent>
+          </CarouselCard>
+          <CarouselCard autoSize aria-label="2 of 7">
+            <WireframeContent appearance="even" size="small">
+              <Subtitle2 align="center">Lorem Ipsum</Subtitle2>
+              <Caption1 align="center">Lorem ipsum...</Caption1>
+            </WireframeContent>
+          </CarouselCard>
+          <CarouselCard autoSize aria-label="3 of 7">
+            <WireframeContent appearance="odd" size="medium">
+              <Title1 align="center">Lorem Ipsum</Title1>
+              <Caption1 align="center">Lorem ipsum dolor sit amet...</Caption1>
+            </WireframeContent>
+          </CarouselCard>
+          <CarouselCard autoSize aria-label="4 of 7">
+            <WireframeContent appearance="even" size="large">
+              <Title1 align="center">Lorem Ipsum</Title1>
+              <Body1 align="center">Lorem ipsum dolor sit amet...</Body1>
+            </WireframeContent>
+          </CarouselCard>
+          <CarouselCard autoSize aria-label="5 of 7">
+            <WireframeContent appearance="odd" size="medium">
+              <Title1 align="center">Lorem Ipsum</Title1>
+              <Caption1 align="center">Lorem ipsum dolor sit amet...</Caption1>
+            </WireframeContent>
+          </CarouselCard>
+          <CarouselCard autoSize aria-label="6 of 7">
+            <WireframeContent appearance="even" size="large">
+              <Title1 align="center">Lorem Ipsum</Title1>
+              <Body1 align="center">Lorem ipsum dolor sit amet...</Body1>
+            </WireframeContent>
+          </CarouselCard>
+          <CarouselCard autoSize aria-label="7 of 7">
+            <WireframeContent appearance="odd" size="small">
+              <Subtitle2 align="center">Lorem Ipsum</Subtitle2>
+              <Caption1 align="center">Lorem ipsum...</Caption1>
+            </WireframeContent>
+          </CarouselCard>
+        </CarouselSlider>
       </CarouselViewport>
 
       <CarouselNavContainer layout="inline" next={{ 'aria-label': 'go to next' }} prev={{ 'aria-label': 'go to prev' }}>
diff --git a/packages/react-components/react-components/src/index.ts b/packages/react-components/react-components/src/index.ts
index 69fd068033378..83d8f76686912 100644
--- a/packages/react-components/react-components/src/index.ts
+++ b/packages/react-components/react-components/src/index.ts
@@ -1922,8 +1922,6 @@ export {
   renderCarouselNavImageButton_unstable,
   useCarouselNavImageButtonStyles_unstable,
   useCarouselNavImageButton_unstable,
-  // CarouselSlider is deprecated, instead use CarouselViewport
-  // eslint-disable-next-line deprecation/deprecation
   CarouselSlider,
   carouselSliderClassNames,
   renderCarouselSlider_unstable,