カルーセルは、画像やテキストを含む複数の要素をスライド形式で順番に表示する機能です。
スライダーやスライドショーとも呼ばれています。
Studioでは、リスト機能を使った「リストカルーセル」と、CMSデータを使った「CMSカルーセル」の2種類を実装できます。
リストカルーセル
注意：無限ループ再生はサポートしていません。詳しくは、カルーセルの自動再生機能で、要素の無限ループ再生はできますか？をご覧ください。
リストカルーセルを配置する
リスト機能を使ったカルーセルは、専用パーツを使用して配置します。
専用パーツにはサンプルデータがあらかじめ設定されているので、アイテムを置き換えて使用してください。
エディタ左側のナビゲーションで追加アイコン
をクリックします。追加パネル下部[インタラクション]の[Carousel]をドラッグ&ドロップ、またはクリックしてスクリーンに配置します。
カルーセルアイテムを編集する
カルーセル内のテキストや画像などのデータは、右パネル上の[データ]タブで編集します。
カルーセルパーツを選択します。
正しく選択できていれば、右パネルに[カルーセル]タブが表示されます。
右パネルで[データ]タブを選択します。
パネルが表示されていない場合は、右パネルを開きます。
データを編集します。
編集方法の詳細は、リストの作成と管理方法をご覧ください。
プロパティを追加する
下記の手順で、新たにプロパティを追加できます。
自動再生の設定
カルーセルには自動再生が設定できます。
設定項目 | 詳細 |
再生間隔 | スライドが切り替わるまでの間隔 |
送り時間 | スライドが流れる速度 |
ホバーで停止 | マウスでカーソルを当てる又は、キーボード操作でフォーカスが当った際に自動再生が止まります。カーソル・フォーカスが外れると自動再生が開始します |
変換ボタンが表示される場合は、ボタンをクリックすると設定欄が表示されます。詳しくは、カルーセルを自動再生するをご覧ください。
カルーセルのデザインを編集する
カルーセルパーツ内のアイテムは、レイアウトやスタイルを共有しています。
例えば、1アイテムのテキストサイズを変更すると、ほかの全アイテムにも同じ変更が反映されます。
編集方法
カルーセルパーツをダブルクリックして編集モードにします。
各種編集をします。
外観・ポジション・色などのデザイン編集は、右パネルの[ボックス]タブから行います。
アイテムを追加する場合には、[データ]タブ上の表でアイテムを追加します。
※カルーセル内アイテムのサイズを小さくした場合でも、同一画面に同時に表示できるアイテム数は最大7件です。
表示順と中央配置
カルーセルは、[データ]タブの表の最上部のアイテムが中央に表示される仕様です。