対象プラン：全プラン
リストデータを使ったカルーセル
カルーセルとは、画像やテキストを含む複数のアイテムを一定間隔で切り替えて表示する機能のことです。スライダーやスライドショーとも呼ばれています。
Studioでは、下記2種類のカルーセルが実装できます。この記事では、リストカルーセルの配置・編集などの基本操作をご紹介します。
リストカルーセル
注意：無限ループ再生はサポートしていません。詳しくは、カルーセルの自動再生機能で、要素の無限ループ再生はできますか？をご覧ください。
カルーセルボックスの配置方法
リストカルーセルをページに配置するには、サンプルデータが入った専用のボックスを使います。
エディタ左側の追加パネルを開きます。
ボックスメニューの[Carousel]をページ上にドラッグ&ドロップするか、クリックして配置します。
カルーセルアイテムの編集
カルーセルに表示するテキストや画像などのデータは、レイヤーパネルで管理・編集します。
カルーセルボックスを選択します。
画面左側のレイヤーパネルを開きます。
リスト内に表示されるデータを編集します。 編集方法について詳しくは、リストの作成と管理方法をご覧ください。
リストへのデータ追加
下記の手順で、リストへ新たにプロパティを追加できます。
カルーセルボックスを選択します。
画面左側のレイヤーパネルを開きます。
リストを右端までスクロールすると表示される[+]をクリックします。
プロパティの種類を選択します。 プロパティの種類について詳しくは、リストの作成と管理 > プロパティの追加をご覧ください。
自動再生の設定
カルーセルのアイテムが自動でスライドする設定できます。自動再生を有効にし、以下の項目を設定します。
設定項目 | 詳細 |
再生間隔 | スライドが切り替わるまでの間隔 |
送り時間 | スライドが流れる速度 |
ホバーで停止 | マウスでカーソルを当てる又は、キーボード操作でフォーカスが当った際に自動再生が止まります。カーソル・フォーカスが外れると自動再生が開始します |
変換ボタンが表示される場合は、ボタンをクリックすると設定欄が表示されます。詳しくは、カルーセルの自動再生はどのように設定できますか？をご覧ください。
カルーセルのデザイン編集
カルーセルボックス内のアイテムは、レイアウトやスタイルが共通です。例えば、1アイテムのテキストサイズを編集すると、残り全てのアイテムも同様に編集内容が反映されます。
編集方法
カルーセルリストをダブルクリックします。
編集モードの状態で、デザイン編集ができます。 ボックスの追加やサイズ・色などのスタイル編集が行えます。
注意：
カルーセル内アイテムのサイズを小さくして、同一画面に同時に表示できるアイテム数は最大7件です。
カルーセル内のアイテムは、リストの最上部のアイテムが中央に表示されます。
そのため、左端からアイテムを順番で表示したい場合はアイテムの順番を画像のように調整する必要があります。
