CMSデータをカルーセルスライダーで表示する

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

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

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

この記事ではStudioでご利用いただける２種類のカルーセルの内、CMSダッシュボードでデータ管理し、エディターでデザイン編集を行う「CMSカルーセル」の追加・編集方法をご紹介します。

エディター上のリストでデータ管理する「カルーセル（リスト）」については、以下の記事をご覧ください。

関連記事

CMSカルーセルの配置

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

※CMS機能をまだ利用していないプロジェクトでは、まずCMSをはじめるからCMSを有効化する必要があります。

カルーセル内のテキストや画像などのコンテンツは、CMSダッシュボードで管理・編集します。

カルーセルにはCMSモデルが紐付いており、カルーセルのカードにはモデル内アイテムのデータが表示されます。タイトル、本文、Cover プロパティが初期設定されています。

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

CMSダッシュボードへ移動し、アイテムにプロパティを追加します。詳しい手順は、以下の記事でご確認ください。

ボックスを選択し、画面右の「<」アイコンをクリックするか、ショートカットキー（Macでは ⌘ + 5、Windowsでは Ctrl + 5）でボックス設定パネルを開きます。先ほど追加したプロパティを選択すると、データが表示されます。

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

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

カルーセル内の各アイテムのレイアウトやスタイルは共通ですが、プロパティを使って個別にスタイルを調整することも可能です。

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

関連記事

carousel