# Carousel

> A carousel is a row of items that people scroll sideways, such as images or cards. Material 3 has a Carousel with multi-browse, uncontained, hero and full-screen layouts, and iOS has no component of that name.

Page: https://www.appetiteui.com/glossary/carousel. Carousel in mobile UI: Material 3 layouts and iOS. Also called Horizontal scroller, Image slider.

## Why it matters

A carousel puts several items in a small space, but it hides the ones off screen. Showing a peek of the next item is what tells people to scroll.

Content in a carousel gets fewer views than content in view, so it should not hold the only route to something important.

## iOS and Android

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | No carousel component: paged or scrolling content with a page control | Carousel: multi-browse, uncontained, hero, full-screen | Card and Pagination, dots |
| Layouts (Material Components) | None named | Multi-browse, uncontained, hero, full-screen | See below |
| Position marker in the file | Page Control dots | None | See below |

## In Appetite UI

The kit draws the parts, not a component: Card for the item, and Pagination dots that mark the position in an image carousel. The Card page has a favorite button over the image and dots under it, five at a time.

## Example

A travel app scrolls place cards sideways with a peek of the next one at the edge; an image gallery on a listing pages with five dots.

## Common mistakes

- No peek of the next item. People will not know to scroll.
- Autoplay. Let people control it.
- Hiding the only route to something important in a carousel.
- Too many items. Past about 10 use a grid.

## Questions

### What are the Material 3 carousel layouts?

Multi-browse, uncontained, hero (start or center aligned) and full-screen. Multi-browse shows at least one large, one medium and one small item.

### Does iOS have a carousel?

Not under that name. Apple offers scrolling and paged content, with a page control to mark the position.

## Sources

1. [Material Design 3: Carousel](https://m3.material.io/components/carousel/overview)
2. [Material Components for Android: Carousel](https://github.com/material-components/material-components-android/blob/master/docs/components/Carousel.md)
3. [Apple Human Interface Guidelines: Page controls](https://developer.apple.com/design/human-interface-guidelines/page-controls)

## Related

- Docs: [Card](https://www.appetiteui.com/docs/card)
- Docs: [Pagination](https://www.appetiteui.com/docs/pagination)
- Glossary: [Page control](https://www.appetiteui.com/glossary/page-control)
- Glossary: [Card](https://www.appetiteui.com/glossary/card)
- Glossary: [Chip](https://www.appetiteui.com/glossary/chip)