> For the complete documentation index, see [llms.txt](https://docs.nubrick.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.nubrick.app/editor/carousel.md).

# カルーセルを利用する

カルーセルは、複数のアイテムを横または縦にスクロールして表示するコンポーネントです。商品、記事、キャンペーンなどの一覧を表示する用途に利用できます。

カルーセルには、次の2つの作成方法があります。

* エディタで複数の子要素を追加して、アイテムを1つずつ作成する
* APIから取得した配列データをもとに、アイテムを繰り返し表示する

## カルーセルブロックの作成

1. エディタの追加メニューから **Carousel** を追加します。
2. 右パネルで表示方向、子要素のサイズ、余白を設定します。
3. 必要に応じて、ページインジケーターや自動スクロールを設定します。

{% hint style="info" %}
ページインジケーターは現在iOSのみ対応しています。
{% endhint %}

## 子要素を1つずつ追加する

固定のバナーやカードを並べる場合は、カルーセルに複数の子要素を追加します。各子要素がカルーセルの1アイテムになります。

1. カルーセルの中に **Vertical** などのコンテナを追加します。
2. コンテナ内に画像、テキスト、ボタンなどを配置して、1つ目のアイテムを作成します。
3. 追加するアイテムごとに、同じようにカルーセル直下へコンテナを追加します。

たとえば、3枚の画像バナーを表示したい場合は、画像を含むコンテナを3つ追加します。アイテムごとに内容やタップ時の処理を変えられます。

## 配列データから繰り返し表示する

APIから商品一覧などの配列データを取得する場合は、1つの子要素の中で[変数を利用する](/editor/variables.md)ことで、配列の件数分だけ繰り返して表示できます。

### APIからデータを取得する

1. 埋め込みやモーダルなどのページフレームを選択し、右パネルの **APIからデータを取得** でリクエストを設定します。
2. APIレスポンス(`data`)に、表示したいアイテムの配列が含まれていることを確認します。

以下のようなレスポンスを例にします。

```json
{
  "products": [
    { "name": "商品A", "image": "https://example.com/a.png" },
    { "name": "商品B", "image": "https://example.com/b.png" }
  ]
}
```

### カルーセルに配列を設定する

1. カルーセルを選択します。
2. 右パネルから取得した配列データを選択します。この例では `data.products` を指定します。
3. カルーセル直下に、繰り返し表示するための子要素を1つだけ追加します。通常は **Vertical** などのコンテナを使います。
4. その子要素の中に画像やテキストを配置し、配列の各要素を `{{ data.xxx }}` で参照します。

上のレスポンスでは、テキストブロックのコンテンツに `{{ data.name }}`、画像ブロックのURLに `{{ data.image }}` を設定します。カルーセルは `products` の各要素に対してこの子要素を繰り返し表示します。

{% hint style="warning" %}
配列データを設定したカルーセルでは、カルーセル直下に設定できる子要素は1つだけです。2つ目以降の子要素はアプリ上に表示されません。複数のアイテムを個別に作成したい場合は、配列データの設定を外してください。
{% endhint %}

{% hint style="info" %}
配列データを利用している子要素の中では、`{{ data.xxx }}` は配列全体ではなく、現在表示している1件のデータを参照します。
{% endhint %}

## 使い分け

| 方法          | 向いているケース                           |
| ----------- | ---------------------------------- |
| 子要素を複数追加する  | 固定のバナーや、アイテムごとにレイアウト・操作を変えたい場合     |
| 配列データから繰り返す | 商品一覧や記事一覧など、同じレイアウトで動的なデータを表示したい場合 |

変数の書式や利用できるデータの詳細は、[変数を利用する](/editor/variables.md) を参照してください。


---

# 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://docs.nubrick.app/editor/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.