FlipView

A FlipView shows one item at a time, such as images or sections, and lets users flip through them with the buttons, swipes, the mouse wheel or the keyboard.

Usage

<script>
  import { FlipView } from 'fluentui-svelte';
</script>

<FlipView aria-label="Landscapes" style="height: 14rem;">
  <img src="/one.jpg" alt="One" />
  <img src="/two.jpg" alt="Two" />
  <img src="/three.jpg" alt="Three" />
</FlipView>

Orientation

orientation flips the items horizontally (default) or vertically.

View Code

<script>
  import { FlipView } from 'fluentui-svelte';
</script>

<FlipView aria-label="Horizontal" style="height: 12rem;">…</FlipView>
<FlipView aria-label="Vertical" orientation="vertical" style="height: 12rem;">…</FlipView>

Any content

Each direct child is an item: images, videos or whole sections.

View Code

<script>
  import { FlipView, MediaPlayer } from 'fluentui-svelte';
</script>

<FlipView aria-label="Steps" style="height: 12rem;">
  <section>
    <h3>Design</h3>
    <p>Fluent 2 tokens, materials and motion.</p>
  </section>
  <section>…</section>
  <MediaPlayer label="Video" src="video.mp4" poster="poster.jpg" layout="compact" />
</FlipView>

Design

Fluent 2 tokens, materials and motion.

Build

Svelte 5 components with native forms.

Ship

Accessible by default, light and dark.

Selected item

Use bind:index to read or change the visible item.

View Code

<script>
  import { FlipView, Button } from 'fluentui-svelte';
  const photos = ['1506905925346-21bda4d32df4', '1501785888041-af3ef285b470', '1470071459604-3b5ec3a7fe05'];
  let index = $state(0);
</script>

<FlipView aria-label="Landscapes" bind:index style="height: 12rem;">
  {#each photos as id, i (id)}
    <img src="https://images.unsplash.com/photo-{id}?w=768&h=384&fit=crop&q=70" alt="Landscape {i + 1}" />
  {/each}
</FlipView>
{#each photos as _, i}
  <Button appearance={i === index ? 'accent' : 'standard'} onclick={() => (index = i)}>{i + 1}</Button>
{/each}

Keyboard and accessibility

Focus the FlipView and use the arrow keys, Home and End. Hidden items are inert. Name it with aria-label.

Component Props

Name	Type	Default	Description
`index` bindable	`number`	`0`	The index of the visible item.
`orientation`	`'horizontal'` \| `'vertical'`	`'horizontal'`	The direction the items flip in.
`previousLabel`	`string`	`'Previous'`	Accessible name of the previous button.
`nextLabel`	`string`	`'Next'`	Accessible name of the next button.
`onIndexChange`	`(index: number) => void`		Called when the visible item changes.
`ref` bindable	`HTMLDivElement` \| `null`		The root element.
`viewportRef` bindable	`HTMLDivElement` \| `null`		The element that holds and scrolls the items.
Element Attributes (`div`)

Components

FlipView

Usage

Orientation

Any content

Design

Build

Ship

Selected item

Keyboard and accessibility

Component Props