カルーセルを利用する

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

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

• エディタで複数の子要素を追加して、アイテムを1つずつ作成する

• APIから取得した配列データをもとに、アイテムを繰り返し表示する

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

1. エディタの追加メニューから Carousel を追加します。

2. 右パネルで表示方向、子要素のサイズ、余白を設定します。

3. 必要に応じて、ページインジケーターや自動スクロールを設定します。

ページインジケーターは現在iOSのみ対応しています。

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

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

1. カルーセルの中に Vertical などのコンテナを追加します。

2. コンテナ内に画像、テキスト、ボタンなどを配置して、1つ目のアイテムを作成します。

3. 追加するアイテムごとに、同じようにカルーセル直下へコンテナを追加します。

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

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

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

APIからデータを取得する

1. 埋め込みやモーダルなどのページフレームを選択し、右パネルの APIからデータを取得 でリクエストを設定します。

2. APIレスポンス(data)に、表示したいアイテムの配列が含まれていることを確認します。

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

{
  "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 の各要素に対してこの子要素を繰り返し表示します。

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

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

使い分け

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

変数の書式や利用できるデータの詳細は、変数を利用する を参照してください。