カルーセルの概要
カルーセルは、画像やテキストなどの複数の要素を含むアイテムをスライド形式で切り替えて表示する機能です。限られたスペースで複数のコンテンツを見せたい場合に適しており、スライダーやスライドショーとも呼ばれます。
Studioでは、同じレイアウトのボックスをまとめて管理できるリスト機能を元にカルーセル機能が構成されています。
Point：リストとは
リストは、同じレイアウトのボックスをまとめて管理できる機能です。
テキストや画像などのデータを一元管理できるほか、Studio CMSなどと接続すれば、更新に応じて内容が自動反映される動的リストとしても使えます。
デフォルトでは、静的なリストとして機能します。
リスト機能の概要については、リストの記事を参照してください。
カルーセルに接続できるデータの種類
一方で、カルーセルにデザインエディタ外のデータを接続すると、動的な要素として機能します。Studio CMSのデータや、API・RSSで取得したStudio外部のコンテンツデータの接続が可能です。
接続するデータソースによって操作方法が異なるため、詳細は次の記事を参照してください。
接続データ | カルーセルの挙動 | データの管理場所 | 機能 | ユースケース |
リストプロパティ | 静的 | デザインエディタ > 右パネル > [データ]タブ | - | 少量・固定的な情報 |
Studio CMSのプロパティ、またはAPI・RSSで取得した外部プロパティ | 動的 | Studio CMSダッシュボード、またはデータ接続元の外部サービス |
| 記事・商品など、件数が多く更新頻度も高い情報 |
注意：無限ループ（マーキー）表現をカルーセルで設定したい
カルーセル機能を使用した無限ループ再生はサポートしていません。（参考：カルーセルの自動再生機能で、要素の無限ループ再生はできますか？）
代替として、Loop Box（ループボックス）を活用して無限ループを設定できます。
カルーセルの基本構造
カルーセルの基本構造や編集方法について解説します。
カルーセルのデザイン構成
Studioのカルーセルはリスト機能を元に構成されています。
全体を囲むカルーセルボックス、その中に並ぶカルーセルアイテム、各アイテム内に表示するプロパティで構成されます。
カルーセル内のアイテムは基本的に共通レイアウトのため、1つのアイテムでレイアウトやデザインを変更すると、同じカルーセル内の他のアイテムにも変更が反映されます。
1. カルーセルボックス
カルーセルボックスは、カルーセルアイテムとカルーセルの再生ボタンを含むカルーセル全体をまとめる親ボックスです。
スクリーン上では、複数のカルーセルアイテムが並ぶ領域全体に対応し、レイヤーパネルでは、カルーセルの一番上の階層にある要素が該当します。
2. カルーセルアイテム
カルーセルアイテムは、カルーセルボックス内に並ぶ、1件分のスライドに対応する単位です。レイヤーパネルでは、カルーセルボックスの下位レイヤーにあたり、レイヤー名の頭に[0][1][2][3]と番号が振られています。
3. プロパティを表示するボックス
アイテム内に配置した各種ボックスに、接続データのプロパティを紐付けて反映します。
アイテム内のボックスとプロパティを紐付ける
各プロパティは、カルーセル内のボックスと紐付けを行うことでカルーセル上で表示されます。
あらかじめサンプルプロパティがセットされたカルーセルパーツは、プロパティとボックスがすでに紐付けられていますが、、パーツ内に新たにボックスやプロパティを追加した場合には、改めて紐付け操作が必要です。
接続データによって操作方法が異なるため、詳細は次の記事を参照してください。
カルーセル全体を編集する
カルーセル全体を選択する
レイヤーパネルなどで対象のカルーセル全体を選択し、右パネルから設定を行います。
編集したいカルーセルを選択します。
対象のカルーセル全体が水色にハイライトされます。
右パネルで使用したいタブを開き、対象の設定を編集します。
パネルが閉じている場合には、右パネルを開いてください。
カルーセル全体のレイアウト・外観を編集する
リスト全体の幅や高さ、アイテムの並び方向やアイテム間の余白の設定ができます。
カルーセル全体を選択します。
右パネルで[ボックス]タブを開き、対象の編集箇所で設定をします。パネルが閉じている場合には、右パネルを開いてください。
参考記事：リスト内アイテムを縦並び／横並びにしたい
カルーセルのプロパティを編集する
通常のカルーセルは、データをプロパティ管理表で作成・管理します。
カルーセル全体を選択します。
右パネルで[データ]タブを開き、対象の編集箇所で設定をします。パネルが閉じている場合には、右パネルを開いてください。
カルーセルで使用できるプロパティの種類やプロパティ管理表の操作方法は、リストプロパティを参照してください。
カルーセルにデータを接続する（動的なカルーセルに変換する）
Studio CMSなどのデータを接続することで、動的なカルーセルに変換できます。
カルーセル全体を選択します。
右パネルで[データ]タブを開き、[データを接続する]から接続したいデータソースを選択します。パネルが閉じている場合には、右パネルを開いてください。
手順の詳細は、Studio CMSを接続した動的なカルーセル > カルーセルにStudio CMSを接続するを参照してください。
カルーセルアイテムを編集する
カルーセルアイテム内を編集する際は、アイテムを編集モードに切り替えてから操作します。
注意：カルーセル内でプロパティが同じ内容に置き換わってしまった場合
カルーセル内のアイテムは、基本的にすべて同じレイアウトで構成されますが、プロパティが正しく反映されていれば、ボックス内のコンテンツ（テキスト、画像、リンクなど）は、プロパティの内容に応じてアイテムごとに異なる内容が表示されます。
意図せず、テキスト・画像・リンクなどのコンテンツがカルーセル内ですべて同じ内容に置き換わってしまった場合には、以下のヘルプ記事を参照してください。
カルーセルアイテムを編集モードに切り替える
カルーセルアイテム内の編集や、ボックスとプロパティの紐付けは、カルーセルアイテムを編集可能な状態（編集モード）に切り替えてから行います。
Tips：レイヤーパネルでカルーセルアイテムを選択した場合も、同様にカルーセルアイテムの編集ができます。
カルーセルアイテムの編集モードを解除する
対象のカルーセル外の上下空きスペースをクリックします。
注意：カルーセル横の欄外をクリックすると、スクリーンには表示されていないカルーセルアイテムをクリックしてしまう場合があります。
編集モードが解除され、レイヤーパネル上の表示がページ全体のレイヤー表示に切り替わります。
カルーセルアイテムのレイアウト・外観を編集する
右パネルで編集箇所の対象タブを開き、編集します。パネルが閉じている場合には、右パネルを開いてください。
編集を加えると、同じカルーセル内の全てのアイテムに反映されます。
カルーセル内のボックスにプロパティを紐付ける
カルーセルアイテム内のボックスにプロパティを紐付けることで、テキストや画像、URLリンクなどが反映されます。
カルーセルに接続するデータの種類によって操作方法が異なるため、詳細は次の記事を参照してください。
注意：カルーセルアイテム内のプロパティが同じ内容に置き換わってしまった場合
リカルーセル内のアイテムは、基本的にすべて同じレイアウトで構成されますが、プロパティが正しく反映されていれば、ボックス内のコンテンツ（テキスト、画像、リンクなど）は、プロパティの内容に応じてアイテムごとに異なる内容が表示されます。
意図せず、テキスト・画像・リンクなどのコンテンツが同一カルーセル内ですべて同じ内容に置き換わってしまった場合には、以下のヘルプ記事を参照してください。
カルーセルの自動再生
カルーセルには自動再生機能があり、スライドが自動で切り替わるように設定できます。
自動再生では、再生間隔・送り時間・ホバーで停止などの項目を調整し、切り替えのタイミングや速度を制御します。
設定方法などの詳細は、カルーセルを自動再生するを参照してください。
注意：自動再生とアクセシビリティ
自動再生やホバー停止の挙動は、スクリーンリーダー利用者やキーボード操作中心のユーザーの閲覧体験に影響します。
重要な情報や操作をカルーセルだけに依存せず、代替の導線やテキストリンクを設置することを検討してください。
表示件数と並び順
カルーセルで表示するアイテムの件数や並び順を設定できます。
カルーセルアイテムの表示件数
カルーセルのアイテム表示数は最大50件です。
カルーセルで同一画面に同時に表示できるアイテム数は最大7件までです。
カルーセルアイテムの並び順を変更する
カルーセルは、[データ]タブの表の最上部のアイテムが中央に表示される仕様です。そのため、左端からアイテムを順番に表示したい場合は、アイテムの並び順を調整する必要があります。
並び順の変更方法は、カルーセルの接続データにより異なります。具体的な手順は、各記事を参照してください。
カーセル