メインコンテンツにスキップ
カルーセル(リスト)

スライドショーを作成し、画像やテキストなどを表示します

Saika avatar
対応者:Saika
1か月以上前に更新

クリックやスワイプで複数アイテムの表示を切り替えるカルーセル(スライダー・スライドショー)が配置・デザインできます。

カルーセルを使用すると、限られたスペースでより多くのコンテンツを表示させたり、自動再生機能を使い、サイトに動きを加えることも可能です。

※現時点で無限ループ再生はサポートしていません。詳しくは、以下の記事をご覧ください。

この記事ではStudioでご利用いただける2種類のカルーセルの内、データ管理とデザイン編集をエディター内で完結できる「カルーセル(リスト)」の追加・編集方法をご紹介します。

Studio CMSダッシュボーで管理するデータで作る「CMSカルーセル」については、以下の記事をご覧ください。

カルーセルボックスの配置

デザインエディター左側の追加パネルから、カルーセルボックスをドラッグ&ドロップ、またはクリックでスクリーンに配置できます。

このボックスには、3つのアイテムがあらかじめ登録されています。サンプルデータを入れ替えて利用したり、データを追加、デザインを編集してカスタマイズいただくことも可能です。

カルーセルアイテムの編集

カルーセルに表示するテキストや画像などのデータは、レイヤーパネルで管理・編集します。

カルーセルボックスを選択し、画面左のレイヤーパネルを開きリスト内に表示されるデータを直接編集します。

リストの編集方法について詳しくは、リスト編集・管理をご覧ください。

データの追加

レイヤーパネル上でリストを右端までスクロールすると表示される「+」ボタンをクリックして、プロパティ(列)が追加できます。

プロパティの種類について詳しくは、プロパティをご覧ください。

※ 「テキストプロパティの改行あり・なし」と「参照プロパティ」はリストでは提供していません

カルーセルの自動再生

また、カルーセルのアイテムが自動でスライドする自動再生が設定でき、再生間隔などの指定も可能です。

設定項目

詳細

再生間隔

スライドが切り替わるまでの間隔

送り時間

スライドが流れる速度

ホバーで停止

マウスでカーソルを当てる又は、キーボード操作でフォーカスが当った際に自動再生が止まります。カーソル・フォーカスが外れると自動再生が開始します

ここに変換ボタンが表示される場合は、ボタンをクリックすると設定欄が表示されるようになります。詳しくは、以下の記事をご覧ください。

カルーセルのデザイン編集

カルーセル内アイテムのレイアウトやスタイルは共通となります。カラー数値ブール値プロパティを使って、アイテム毎にスタイルに変化をつけることは可能です。

アイテム毎に異なるURLを設定する方法

URLプロパティを追加し、リンク先をそれぞれ指定します。

リンク設定したいボックスを選択した状態で、画面右側のパネルを開きます。リンク設定にて、先ほど追加したURLプロパティを選択します。

関連記事

注意点

  • カルーセル内アイテムのサイズを小さくして、同一画面に同時に表示できるアイテム数は最大7件です。

carousel

こちらの回答で解決しましたか?