# 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 in Legend Slides](https://legend.so/slides/effects/previews/app-carousel/38e37f9377f59c9bcbac02a6276a2846652578cd57a69609626d2046537dfe27.png)

Still captured in Legend Slides for macOS (development build).

[Install in Slides](legend-slides://effects/install?pack=media&version=1.0.0)[Open example in Slides](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

```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)