> For the complete documentation index, see [llms.txt](https://help.craftsmanplus.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.craftsmanplus.com/play/layers/components/carousel.md).

# Carousel

The Carousel component is a swipeable card gallery. Users drag through a row (or column) of cards, and the carousel snaps to one focused card at a time. Two-way directions (Left & Right, Up & Down) loop endlessly through the cards; one-way directions stop at the first and last card. Use it for product galleries, character selects, or any browse-and-pick moment in your playable.

Each card is a layer you add inside the carousel — the carousel handles spacing, alignment, focus, and motion automatically.

### Adding Cards

Hover the Carousel layer in the Layers panel and click **Edit** to enter its edit mode, then use the **Add Layer** menu to add cards. Cards can be **Image**, **Text**, **Sequence**, **Hotspot**, **Group**, or **Shape** layers — use a Group when a single card needs multiple elements.

Card position is managed by the carousel, so the X/Y fields are locked on card layers; layout is controlled entirely from the carousel's properties. Cards can still have their own interactions, so you can make each card tappable.

### Layout

* **Layout** sets the card flow: **Horizontal** (default) or **Vertical**.
* **Layout Alignment** anchors the cards within the component. Horizontal layouts offer Top Center, Center, and Bottom Center; vertical layouts offer Center Left, Center, and Center Right. Default is **Center**.
* **Layout Spacing** sets the distance between cards, from 0 to 1000. Default is **10**.

### Component Options

* **Direction** limits which way users can swipe. Horizontal layouts offer Left, Right, or **Left & Right** (default); vertical layouts offer Up, Down, or Up & Down.
* **Auto Behavior** sets what the carousel does on its own. **None** (default) waits for user input, **Guide** shows an animated hand prompting a swipe, and **Scroll** advances through cards automatically.
* **Scroll Duration** and **Scroll Delay** appear only when Auto Behavior is **Scroll**: how long each card-to-card move takes (default **2** seconds) and how long the carousel waits between moves (default **3** seconds).
* **Acceleration** sets the easing of the card transition animation. Default is **Linear**.
* **Inactive Size** scales the unfocused cards, from 1 to 200 percent of full size. Default is **80**.
* **Inactive Color** applies a color overlay to unfocused cards, tinting them so the focused card stands out. Default is **#000000**.
* **Arrows** toggles tappable navigation arrows on and off. Default is **on**. The arrows shown match your Direction setting, and tapping one advances the carousel by one card. Arrow images are child layers of the component, so you can restyle them in edit mode.

{% hint style="info" %}
Carousel layers cannot be rotated, and their interactions are fixed to the built-in drag behavior. Add interactions to individual cards instead.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://help.craftsmanplus.com/play/layers/components/carousel.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.