# @fluentui/react-carousel

> A composable carousel component that enables pagination with minimal rerenders

Latest version **9.9.14** (published 2026-09-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fluentui/react-carousel
pnpm add @fluentui/react-carousel
yarn add @fluentui/react-carousel
bun add @fluentui/react-carousel
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; popular repo.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 9.9.14 |
| Published | 2026-09-23 |
| First published | 2024-10-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 15 |
| Unpacked size | 861 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20294 |
| Maintainers | uifabricteam, uifrnbot, microsoft1es, microsoft-oss-releases |

## Links

- npm: https://www.npmjs.com/package/@fluentui/react-carousel
- Repository: https://github.com/microsoft/fluentui
- Homepage: https://github.com/microsoft/fluentui#readme
- Issues: https://github.com/microsoft/fluentui/issues
- npm.io page: https://npm.io/package/@fluentui/react-carousel

## Dependencies (15)

- [@swc/helpers](https://npm.io/package/@swc/helpers.md) ^0.5.1
- [@griffel/react](https://npm.io/package/@griffel/react.md) ^1.5.32
- [embla-carousel](https://npm.io/package/embla-carousel.md) ^8.5.1
- [embla-carousel-fade](https://npm.io/package/embla-carousel-fade.md) ^8.5.1
- [@fluentui/react-aria](https://npm.io/package/@fluentui/react-aria.md) ^9.17.15
- [@fluentui/react-icons](https://npm.io/package/@fluentui/react-icons.md) ^2.0.245
- [@fluentui/react-theme](https://npm.io/package/@fluentui/react-theme.md) ^9.2.2
- [@fluentui/react-button](https://npm.io/package/@fluentui/react-button.md) ^9.11.1
- [@fluentui/react-tabster](https://npm.io/package/@fluentui/react-tabster.md) ^9.26.18
- [@fluentui/react-tooltip](https://npm.io/package/@fluentui/react-tooltip.md) ^9.10.7
- [embla-carousel-autoplay](https://npm.io/package/embla-carousel-autoplay.md) ^8.5.1
- [@fluentui/react-utilities](https://npm.io/package/@fluentui/react-utilities.md) ^9.26.7
- [@fluentui/react-jsx-runtime](https://npm.io/package/@fluentui/react-jsx-runtime.md) ^9.4.6
- [@fluentui/react-shared-contexts](https://npm.io/package/@fluentui/react-shared-contexts.md) ^9.26.4
- [@fluentui/react-context-selector](https://npm.io/package/@fluentui/react-context-selector.md) ^9.2.20

## Recent versions

- 9.9.14 (latest) — 2026-09-23
- 0.0.0-nightly-20260929-0404.1 (nightly) — 2026-09-29
- 9.74.5-experimental.tabster-v9.20260804-bb909442fe.0 (experimental) — 2026-08-04
- 0.0.0-nightly-20260928-0404.1 — 2026-09-28
- 0.0.0-nightly-20260925-0403.1 — 2026-09-25
- 0.0.0-nightly-20260924-0403.1 — 2026-09-24
- 0.0.0-nightly-20260923-0404.1 — 2026-09-23
- 0.0.0-nightly-20260922-0403.1 — 2026-09-22
- 9.9.13 — 2026-09-21
- 0.0.0-nightly-20260917-0408.1 — 2026-09-17
- 0.0.0-nightly-20260916-0409.1 — 2026-09-16
- 0.0.0-nightly-20260915-0407.1 — 2026-09-15
- 0.0.0-nightly-20260914-0407.1 — 2026-09-14
- 0.0.0-nightly-20260910-0408.1 — 2026-09-10
- 0.0.0-nightly-20260909-0407.1 — 2026-09-09
- … 533 more at https://npm.io/package/@fluentui/react-carousel/versions

## README

# @fluentui/react-carousel

**React Carousel components for [Fluent UI React](https://react.fluentui.dev/)**

A Carousel is a sliding viewport that enables a list of tab panels to be hidden offscreen while still remaining accessible via rotating controls or keyboard interactions.

For full screen banners, hidden cards will be set to inert and can be accessed via the underlying nav controls (prev/next/pagination), while smaller responsive CarouselCards can be explored with keyboard navigation (left/right arrow keys) and group focus (Enter/Esc) to void lengthy tabIndex sequences.

The React Carousel uses direct DOM manipulation to ensure that state can be updated without driving a react render cycle of the CarouselCards themselves, users may subscribe to visibility event callbacks or activeIndex supplied via context for updating local state on carousel movement.

A CarouselAnnouncer class is provided that will announce page changes when context is updated for accessibility users.

## Sample Code

```jsx
<Carousel groupSize={1} circular>
  <CarouselSlider>
    {Cards.map((card, index) => (
      <CarouselCard key={`image-${index}`} index={index}>
        Card {index + 1}
      </CarouselCard>
    ))}
  </CarouselSlider>
  <CarouselNavContainer next={{ 'aria-label': 'go to next' }} prev={{ 'aria-label': 'go to prev' }}>
    <CarouselNav>{index => <CarouselNavButton aria-label={`Carousel Nav Button ${index}`} />}</CarouselNav>
  </CarouselNavContainer>
  <CarouselAnnouncer>
    {(currentIndex, totalSlides, _slideGroupList) => {
      return `Slide ${currentIndex + 1} of ${totalSlides}`;
    }}
  </CarouselAnnouncer>
</Carousel>
```

---
_Source: https://npm.io/package/@fluentui/react-carousel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._