メインコンテンツにスキップ

リストカルーセル

カルーセルとは、画像やテキストを含む複数のアイテムを一定間隔で切り替えて表示する機能です。この記事では、Studioのリスト機能を用いたリストカルーセルの配置・編集や自動再生設定、デザイン編集の基本操作について説明します。

今日アップデートされました

Point: カルーセルとは

カルーセルは、画像やテキストを含む複数の要素をスライド形式で順番に表示する機能です。スライダーやスライドショーとも呼ばれています。

Studioでは、静的なリストデータを使った「リストカルーセル」と、Studio CMSのデータを使った「CMSカルーセル」の2種類が実装できます。

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


リストカルーセルを配置する

リスト機能を使ったカルーセルは、専用パーツを使用して配置します。

専用パーツにはサンプルデータがあらかじめ設定されているので、アイテムを置き換えて使用してください。

  1. エディタ左側のナビゲーションで追加アイコンをクリックします。

  2. 追加パネル下部[インタラクション]の[Carousel]をドラッグ&ドロップ、またはクリックしてスクリーンに配置します。


カルーセルアイテムを編集する

カルーセル内のテキストや画像などのデータは、右パネル上の[データ]タブで編集します。

  1. カルーセルパーツを選択します。

    正しく選択できていれば、右パネルに[カルーセル]タブが表示されます。

  2. 右パネルで[データ]タブを選択します。

    パネルが表示されていない場合は、右パネルを開きます。

    スクリーンショット:右パネルのデータパネルで、カルーセルアイテムの表が表示されている様子

  3. プロパティ内のデータを編集します。

    編集方法の詳細は、リストの作成と管理方法をご覧ください。


プロパティを追加する

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

  1. カルーセルパーツを選択します。

    正しく選択できていれば、右パネルに[カルーセル]タブが表示されます。

  2. 右パネルで[データ]タブを選択します。

    右パネルが表示されていない場合は、右パネルを開きます。

  3. リストを右端までスクロールし、[+]をクリックします。

  4. プロパティの種類を選択します。

  5. プロパティの値を入力します。


リストカルーセルに自動再生を設定する

カルーセルには自動再生が設定できます。

設定方法などの詳細は、カルーセルを自動再生するを参照してください。


カルーセルのデザインを編集する

カルーセルパーツ内のアイテムは、レイアウトやスタイルを共有しています。

例えば、1アイテムのテキストサイズを変更すると、ほかの全アイテムにも同じ変更が反映されます。

編集方法

  1. カルーセルパーツをダブルクリックして編集モードにします。

  2. 各種編集をします。

    • 外観・ポジション・色などのデザイン編集は、右パネルの[ボックス]タブから行います。

    • アイテムを追加する場合には、[データ]タブ上の表でアイテムを追加します。

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

Tipsカラー・数値・ブール値などのプロパティを使えば、アイテムごとにスタイルを変えることができます。

ユースケース

  • 特定のアイテムにのみ「新着バッジ」を表示する

  • アイテムごとにボタンの色を変更する

表示順と中央配置

カルーセルは、[データ]タブの表の最上部のアイテムが中央に表示される仕様です。

そのため、左端からアイテムを順番で表示したい場合は、アイテムの順番を画像のように調整する必要があります。

スクリーンショット:カルーセル上の画像に番号が割り振られ、1~7まで左から順番に並んでいる。一方で、リストでは上から順番に4,5,6,7,1,2,3の順番でアイテムが並んでいる。

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