# Carousel

### How It Works

To set up a carousel, simply type "carousel" in the component search bar and drag it to your page. Then, connect the carousel to your data source.

{% @arcade/embed flowId="hIQ7uUEoYizbRAKsBVwA" url="<https://app.arcade.software/share/hIQ7uUEoYizbRAKsBVwA>" %}

### Display Settings

#### Navigation Controls

* **Side Controls**: Arrows on the left and right sides.
* **Header Controls**: Buttons at the top.
* **No Controls**: Navigation through dots at the bottom of the elements without using additional slider buttons.

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FqesHjTts5bNgxBbNyzDU%2Fimage.png?alt=media&#x26;token=2e3fdb4f-34ca-4ace-9f00-73be63f3fb5c" alt=""><figcaption></figcaption></figure>

#### Carousel Steps

* **Row Steps**: Scroll a complete row with one click on the slider button.
* **Custom Steps**: Specify the number of elements to scroll with one click on the slider button.

#### Navigation Options

* **Scroll Navigation**: Navigate using the mouse wheel or trackpad.
* **Drag Navigation**: Navigate by dragging elements.
* **Snap to Cards**: Snap to individual cards while navigating.

#### Cards Per Row

Set the number of elements shown in a single row (e.g., 3 cards per row).

#### Cards Per Query

Define how many elements are included in the carousel based on a specified number.

### Advanced Settings

#### Selection Options

* **Multiple Selection**: Allow multiple cards to be selected.
* **Select First Card by Default**: Automatically select the first card.
* **Enable Search**: Add a search function to filter elements.
* **Display Filters**: Show filtering options.
* **Display Pagination**: Enable pagination controls.

{% hint style="info" %}
More information about Actions and additional properties you can find in our documentation.
{% endhint %}