CMSカルーセル

CMSモデルとアイテムを使用してカルーセルスライダーを作成する

Saika avatar
対応者:Saika
一週間前以上前にアップデートされました

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

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

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

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

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

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

関連記事

CMSカルーセルの配置

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

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

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

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

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

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

データの追加

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

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

カルーセルの自動再生

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

設定項目

詳細

再生間隔

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

送り時間

スライドが流れる速度

ホバーで停止

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

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

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

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

関連記事

注意点

  • カルーセルで表示できるアイテム表示数は最大50件です

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

carousel

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