CMSデータを使ったカルーセル

カルーセルとは、画像やテキストを含む複数のアイテムを一定間隔で切り替えて表示する機能のことです。スライダーやスライドショーとも呼ばれています。

Studioでは、下記2種類のカルーセルが実装できます。この記事では、CMSカルーセルの配置・編集などの基本操作をご紹介します。

注意：無限ループ再生はサポートしていません。詳しくは、カルーセルの自動再生機能で、要素の無限ループ再生はできますか？をご覧ください。

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

CMSカルーセルボックスには、記事タイプのCMSモデルが紐付いています。カルーセル内のアイテムにはモデルのアイテムに登録されているテキストや画像などのデータが表示されます。

カルーセルのアイテムには、デフォルトはタイトル・本文・Cover プロパティが表示されています。

CMSダッシュボードにて、CMSモデルとアイテムを作成します。次の記事を参考に準備しておきましょう。

カルーセルに表示するテキストや画像などのデータは、CMSダッシュボードで管理・編集します。

下記の手順で、CMSアイテムへ新たにプロパティを追加できます。

カルーセルのアイテムが自動でスライドする設定できます。自動再生を有効にし、以下の項目を設定します。

設定項目	詳細
再生間隔	スライドが切り替わるまでの間隔
送り時間	スライドが流れる速度
ホバーで停止	マウスでカーソルを当てる又は、キーボード操作でフォーカスが当った際に自動再生が止まります。カーソル・フォーカスが外れると自動再生が開始します

カルーセルボックスを選択し、レイヤーパネルを開きます。ここで、モデルの変更・フィルター・表示数の編集ができます。詳しくは、動的リストをご覧ください。

カルーセルボックス内のアイテムは、レイアウトやスタイルが共通です。例えば、1アイテムのテキストサイズを編集すると、残り全てのアイテムも同様に編集内容が反映されます。

Tips：CMSプロパティを使えば、アイテムごとにスタイルを変えることができます。

ユースケース

詳しくは、以下の記事をご覧ください。

注意：

カルーセルのアイテム表示数は最大50件です。
カルーセル内アイテムのサイズを小さくして、同一画面に同時に表示できるアイテム数は最大7件です。
カルーセル内のアイテムは、リストの最上部のアイテムが中央に表示されます。そのため、左端からアイテムを順番で表示したい場合はコレクション機能を使い、アイテムの順番を画像のように調整する必要があります。