Point: カルーセルとは
カルーセルは、複数のコンテンツをスライド形式で順番に表示できる機能です。
連携するデータソースに応じて、静的なカルーセルにも動的なカルーセルにもなります。それぞれの違いは、カルーセルの記事を参照してください。
Studio CMSを連携したカルーセル
Studio CMSをカルーセルに連携すると、Studio CMSのコンテンツをスライダー形式で表示できます。対象のカルーセルは動的な要素に切り替わるため、表示コンテンツのフィルターやソート、表示件数の切り替えも可能です。
記事一覧や商品スライダーなど、更新頻度が高いコンテンツや複数ページでコンテンツデータを共通利用したい場合に適しています。
Point: Studio CMSとは
Studio CMSは、Studio上でコンテンツを構造化して管理・更新できるCMS（Content Management System）機能です。 モデルやアイテム、プロパティを組み合わせて、ブログやニュースなどの更新性が高いコンテンツを一元管理します。
Studio CMSの仕組みや基本的な使い方は、以下の記事も参照してください。
Studio CMSがあらかじめ連携されたカルーセルを追加する
Studio CMS側のデータ設定が完了していれば、Studio CMSがあらかじめ連携されたカルーセルボックスを追加できます。
デフォルトでタイトルや本文、画像などのプロパティが表示されます。
1. 事前準備：Studio CMSのコンテンツデータを準備する
CMSカルーセルを作成する前に、カルーセルに表示するためのコンテンツをStudio CMSで作成しておきます。
Studio CMSのコンテンツはCMSダッシュボードで作成します。
CMSモデルは記事タイプを選んでください。
Point: カルーセルとCMSプロパティ
そのため、タイトル、本文、画像、カテゴリ、ボタンラベル、バッジ用フラグなど、カルーセルで必要な要素をプロパティとして設計する必要があります。
2. カルーセルを追加する
デザインエディタ左側のナビゲーションで、[接続]
をクリックします。[CMS]タブから、1で作成したCMSモデルが紐付いた[カルーセル]を選択し、スクリーンに配置します。
カルーセルのデータソースをStudio CMSに変更する
配置済みのカルーセルに後からStusio CMSを連携することができます。連携すると、対象のカルーセルが動的なカルーセルに切り替わります。
対象のカルーセルを選択します。全体が水色にハイライトされ、右パネルに[カルーセル]タブが表示されていればOKです。
右パネルで[データ]タブを開きます。パネルが閉じている場合には、右パネルを開いてください。
カルーセルに連携するデータソースを変更する
以下の手順でカルーセルに連携するデータを変更できます。変更しても、カルーセル自体のレイアウトやデザインには影響しません。
対象のカルーセルを選択します。全体が水色にハイライトされ、右パネルに[カルーセル]タブが表示されていればOKです。
右パネルで[データ]タブを開きます。パネルが閉じている場合は、右パネルを開いてください。
[リスト]の連携データの表示（青字）をクリックして、変更したいデータソース名を選択します。
表示するプロパティを追加する
カルーセル上で表示したいプロパティが増えた場合には、CMSダッシュボードとデザインエディタ両方で設定が必要です。
CMSダッシュボードでプロパティを追加し、その後カルーセル内のボックスに紐付けます。
1. CMSダッシュボードでCMSプロパティを追加する
一覧を右端までスクロールし、[+]からプロパティを追加して各アイテムの値を埋めます。
詳しい手順は、CMSプロパティを参照してください。
2. デザインエディタで、ボックスと追加したプロパティを紐づける
デザインエディタを開きます。
対象のカルーセルが配置されているページを開きます。
対象のカルーセル内のアイテムを編集モードに切り替えます。
対象のカルーセルを選択した状態で、ダブルクリック、またはEnterキーを押します。
その後、カルーセル上の任意のアイテムを選択し、クリックします。
レイヤーパネル上の変化：対象のカルーセルアイテム内の要素のみが表示されます。
スクリーン上の変化：選択したカルーセルアイテムがハイライトされます。
右パネル上の変化：[データ]タブにプロパティと青い点（コネクターの起点）が表示されます。
Point：編集モードへの切り替え方法の詳細は、動的なリスト・カルーセル内のボックスにプロパティを紐付ける > リスト・カルーセル内のアイテムを編集モードに切り替えるも参照してください。
プロパティを紐付けたいボックスを選択します。
ボックスの追加が必要な場合には、プロパティの種類に応じたボックスを追加してください。
右パネルを開き、プロパティの内容に応じたタブを開き、紐付けます。
Point：ボックスと各種CMSプロパティとの紐付け方法の詳細は、動的なリスト・カルーセル内のボックスにプロパティを紐付けるを参照してください。
表示アイテムの絞り込みと表示設定をする
Studio CMSなどデザインエディタ外のプロパティを紐付けたカルーセルは動的な要素に切り替わり、カルーセルで表示するアイテムを動的に編集できます。
注意：CMSコレクションを連携している場合、以下の表示設定の編集ができません。
フィルター
ソート
フィルター
あらかじめ設定したCMSプロパティを元にフィルター条件を設定し、カルーセルで表示するアイテムを絞り込みます。
設定方法などの詳細は、フィルター：CMSリストの表示アイテムを絞り込むを参照してください。
ソート
CMSプロパティを元に、CMSアイテムの表示順を変更できます。
詳細は、CMSリスト > CMSリスト内のアイテムを並べ替える（ソート）を参照してください。
表示数
表示するアイテムの最大数が指定できます。
詳細は、動的リスト > 表示数を参照してください。
注意：登録アイテム数が表示件数より少ない場合
カルーセルに登録しているアイテム数が、設定した表示件数より少ない場合、同じアイテムが繰り返し表示されます。これは仕様によるものです。
解消するには、以下のいずれかの設定をしてください。
表示数の設定を登録アイテム数以下に変更する
登録するアイテム数を表示件数以上に増やす
カルーセルではなく、CMSリストとして実装する
カルーセルの外観やレイアウトを編集する
カルーセルの外観やレイアウトを編集する手順の詳細や注意点などは、カルーセル > カルーセルの外観やレイアウトを編集するを参照してください。
Tips: 条件プロパティを活用したレイアウト
新着バッジの表示有無を切り替える
ボタンや背景の色をアイテム単位で変更する
表示ロジックは、Studio CMSの条件設定と組み合わせて行います。
詳細や活用例は、Studio CMSのプロパティと表示条件内のヘルプ記事を参照してください。
カルーセルに自動再生を設定する
カルーセルには自動再生が設定できます。
設定方法などの詳細は、カルーセルを自動再生するを参照してください。