クリックやスワイプで複数アイテムの表示を切り替えるカルーセル(スライダー・スライドショー)が配置・デザインできます。
カルーセルを使用すると、限られたスペースでより多くのコンテンツを表示させたり、自動再生機能を使い、サイトに動きを加えることも可能です。
※現時点で無限ループ再生はサポートしていません。詳しくは、以下の記事をご覧ください。
この記事ではStudioでご利用いただける2種類のカルーセルの内、データ管理とデザイン編集をエディター内で完結できる「カルーセル(リスト)」の追加・編集方法をご紹介します。
Studio CMSダッシュボーで管理するデータで作る「CMSカルーセル」については、以下の記事をご覧ください。
カルーセルボックスの配置
デザインエディター左側の追加パネルから、カルーセルボックスをドラッグ&ドロップ、またはクリックでスクリーンに配置できます。
このボックスには、3つのアイテムがあらかじめ登録されています。サンプルデータを入れ替えて利用したり、データを追加、デザインを編集してカスタマイズいただくことも可能です。
カルーセルアイテムの編集
カルーセルに表示するテキストや画像などのデータは、レイヤーパネルで管理・編集します。
カルーセルボックスを選択し、画面左のレイヤーパネルを開きリスト内に表示されるデータを直接編集します。
リストの編集方法について詳しくは、リスト編集・管理をご覧ください。
データの追加
レイヤーパネル上でリストを右端までスクロールすると表示される「+」ボタンをクリックして、プロパティ(列)が追加できます。
プロパティの種類について詳しくは、プロパティをご覧ください。
※ 「テキストプロパティの改行あり・なし」と「参照プロパティ」はリストでは提供していません
カルーセルの自動再生
また、カルーセルのアイテムが自動でスライドする自動再生が設定でき、再生間隔などの指定も可能です。
設定項目 | 詳細 |
再生間隔 | スライドが切り替わるまでの間隔 |
送り時間 | スライドが流れる速度 |
ホバーで停止 | マウスでカーソルを当てる又は、キーボード操作でフォーカスが当った際に自動再生が止まります。カーソル・フォーカスが外れると自動再生が開始します |
ここに変換ボタンが表示される場合は、ボタンをクリックすると設定欄が表示されるようになります。詳しくは、以下の記事をご覧ください。
カルーセルのデザイン編集
アイテム毎に異なるURLを設定する方法
URLプロパティを追加し、リンク先をそれぞれ指定します。
リンク設定したいボックスを選択した状態で、画面右側のパネルを開きます。リンク設定にて、先ほど追加したURLプロパティを選択します。
関連記事
注意点
carousel