カルーセルの概要
カルーセルは、画像やテキストなどの複数の要素を含むアイテムをスライド形式で切り替えて表示する機能です。限られたスペースで複数のコンテンツを見せたい場合に適しており、スライダーやスライドショーとも呼ばれます。
どちらもカルーセルパーツとして配置し、ボックス設定やデータ設定から挙動を調整します。
注意：無限ループ再生はサポートしていません。詳しくは、カルーセルの自動再生機能で、要素の無限ループ再生はできますか？をご覧ください。
カルーセルの基本構造
カルーセルのデザイン
Studioのカルーセルはリスト機能を元に構成されています。
全体を囲むカルーセルボックス、その中に並ぶカルーセルアイテム、各アイテム内の項目（プロパティ）で構成されます。
1つのアイテムのレイアウトやスタイルを変更すると、同じカルーセル内の他のアイテムにも変更が共有されます。
カルーセルに表示する項目（プロパティ）
カルーセル内に表示する、タイトル、本文、画像、カテゴリ、ボタンラベルなどは、プロパティとしてカルーセルのデザインとは別の場所で管理します。
リストカルーセルではデザインエディタ右パネルの[データ]タブ、CMSカルーセルではCMSダッシュボードでプロパティを設定します。
Tips: 条件プロパティを活用する
新着バッジの表示有無をブール値で切り替える
数値やカラーを使ってボタンの色をアイテム単位で変更する
アイテムごとに背景色やボタン色を変える
表示ロジックは、CMS側の条件設定や、リストのプロパティ設定と組み合わせて制御します。
リストカルーセルとCMSカルーセル
カルーセルの種類 | データの管理場所 | ユースケース |
少量・固定的な情報（キャンペーンバナー、固定のサービス紹介など） | ||
記事・商品など、件数が多く更新頻度も高い情報 |
リストカルーセルとは
リストカルーセルは、デザインエディタ内のリストプロパティデータを利用したカルーセルです。エディタ内で完結する静的なデータや少量の情報を表示したい場合に適しています。
追加方法や詳細は、リストカルーセルの記事を参照してください。
CMSカルーセルとは
CMSカルーセルは、Studio CMSで管理するCMSプロパティのデータを利用したカルーセルです。記事や商品情報など、更新頻度が多い情報をカルーセル表示する場合に適しています。
追加方法や詳細は、CMSカルーセルの記事を参照してください。
カルーセルアイテムを編集する
カルーセルアイテムはレイアウトやスタイルを共有しています。
例えば、1アイテム内でテキストサイズを変更すると、ほかの全アイテムにも同じ変更が反映されます。
カルーセルアイテムを編集状態に切り替える
カルーセル内のアイテムを編集する際は、アイテムをアクティブにして編集可能な状態にする必要があります。
以下いずれかの方法で、カルーセルアイテムの編集が可能になります。
カルーセルアイテム上でダブルクリックをする
レイヤーパネルでカルーセルアイテムを選択する
カルーセルアイテムが編集状態に切り替わると、右パネルの[データ]タブ上にプロパティと青い点（コネクターの起点）が表示されます。
以下の画像は、CMSリストでカルーセルアイテムがアクティブな場合のデータタブ上の表示例です。
カルーセルの自動再生
カルーセルには、自動再生機能があり、スライドが自動で切り替わるように設定できます。
自動再生では、再生間隔、送り時間、ホバーで停止などの項目を調整し、切り替えのタイミングや速度を制御します。
設定方法などの詳細は、カルーセルを自動再生するを参照してください。
注意：自動再生とアクセシビリティ
自動再生やホバー停止の挙動は、スクリーンリーダー利用者やキーボード操作中心のユーザーの閲覧体験に影響します。
重要な情報や操作をカルーセルだけに依存せず、代替の導線やテキストリンクを設置することを検討してください。
表示件数と並び順
カルーセルアイテムの表示件数
カルーセルのアイテム表示数は最大50件です。
カルーセルで同一画面に同時に表示できるアイテム数は最大7件までです。
カルーセルアイテムの並び順
アイテムの並び順は、リストカルーセルでは[データ]タブの表、CMSカルーセルではCMSコレクションの活用などから制御します。
表示順と中央配置
カルーセルは、[データ]タブの表の最上部のアイテムが中央に表示される仕様です。
そのため、左端からアイテムを順番で表示したい場合は、アイテムの順番を調整する必要があります。
CMSカルーセルの場合には、CMSコレクション機能などを活用して、アイテムの並び順を管理します。
