# Media carousel

A configurable filmstrip with focus blur and retained content.

Source: https://legend.so/slides/effects/app-carousel/

Legend Slides: Preview.

[All effects](https://legend.so/slides/effects/)

[Media carousel preview](https://legend.so/slides/effects/previews/app-carousel/c6d3f139dc8de6f188688f3673c5c7ba08d8552a72b24e79cdce8c5f87ac86e0.mp4)

Recorded in Legend Slides for macOS (development build).

[Install in Slides](legend-slides://effects/install?pack=media&version=1.0.0) [Open example](legend-slides://effects/example?effect=app-carousel) [Download example](https://legend.so/slides/effects/examples/app-carousel/55ca5c66ecec0992d25be7da8484d698b03e0a21d7d6d7226e8a3ebe497f6e96.mdx)

Requires a Legend Slides build with effect installation support. Installs the media pack (1.0.0, 19 KB source) and its dependencies. macOS host capabilities: reanimated, skia, native-video. Installed decks work offline.

## Use it in a deck

app-carousel.mdx

```mdx
---
title: Media carousel
---

import { View, Text } from "react-native";
import { AppCarousel } from "slides:media/AppCarousel";


# Media carousel

<View style={{ width: 1696, height: 650 }}>
<Steps count={3}>{step => <AppCarousel items={["One","Two","Three"]} position={step} cardWidth={900} geometry={{centerX: 848,centerY: 325,spacing: 780}} renderCard={(id,layout) => <View style={{width: layout.width,height: layout.height,backgroundColor: "#164e63",borderRadius: 40,alignItems: "center",justifyContent: "center"}}><Text style={{color: "white",fontSize: 90}}>{id}</Text></View>} />}</Steps>
</View>
```

## Configure

**items / renderCard**

Supply stable IDs and arbitrary card content.

**position / mode**

Select a card and filmstrip/grid/hero layout.

**geometry**

Set stage center, spacing and grid bounds.

Only imported effects enter the compiled deck. [Installation and versioning →](https://legend.so/slides/effects/installation/)

[View Markdown](https://legend.so/slides/effects/app-carousel.md)[Report a documentation correction](https://github.com/LegendApp/legend-docs/issues/new?title=Docs%3A+Media+carousel&body=Page%3A+https%3A%2F%2Flegend.so%2Fslides%2Feffects%2Fapp-carousel%0A%0AWhat+is+incorrect+or+missing%3F%0A%0AExpected+behavior+or+supporting+source%3A%0A)