カルーセル

Carouselコンポーネントを使って、複数のアイテムを魅力的でインタラクティブなスライドショーとして表示します。この動的コンポーネントは画像、テキスト、その他のコンテンツを視覚的に魅力ある形式で表示できるため、注目アイテムのハイライト、製品の紹介、ビジュアルストーリーの提示に最適です。

Carouselの設定

1：データソースを選択する

Carouselをどのようにデータで埋めるかを決めます。 選択肢は3つあります：

2：データマッピングを行う（VariableまたはQueryを使用する場合）

Carouselの属性をデータソース内の対応するフィールドに接続します。 これにより、Carousel内の各アイテムに正しい情報が表示されるようになります。

• 例： 製品を表示する場合、次のようにマッピングすることがあります：

  • タイトル： 「製品名」フィールドへ。

  • 説明： 「製品説明」フィールドへ。

  • 画像： 「製品画像」フィールドへ。

3：レイアウトを設定する

一度に表示するアイテム数や配置方法を制御します。 次の項目を指定できます：

• パネルあたりのアイテム数： 各Carouselスライドに表示するアイテムの数。

• レスポンシブ動作： 小・中・大のデバイス向けに異なるレイアウトを設定して、どの画面サイズでも最適な表示を確保します。

4：その他のオプションを設定する

Carouselの基礎が整ったら、追加オプションで仕上げましょう！このステップでは、Carouselの動作や外観を細かく調整して、あなたのイメージに合わせます。シンプルで洗練されたデザインから、インタラクティブな体験まで、これらの設定で細部をコントロールできます。

できることは次のとおりです：

• ナビゲーションを非表示にする： よりすっきりした見た目にするためにナビゲーション矢印を削除します。

• アイテムをクリック可能にする： ユーザーがCarouselアイテムと対話できるように、アイテムをクリック可能にします。

• インジケーターを設定する： 現在のスライドを示すインジケーターの外観や位置をカスタマイズします。

• アクションを追加する： 各Carouselアイテム内にボタンやリンクを含めて、アクションをトリガーしたり別ページへ遷移させたりします。

これらのオプションにより、使いやすく視覚的に魅力的なCarouselを作成できます。あなたのスタイルに合わせましょう！

なぜCarouselコンポーネントを使うのか？

• 複数のアイテムを表示： 限られたスペースで複数のアイテムを表示します。

• 視覚的魅力を高める： 魅力的でインタラクティブなユーザー体験を作ります。

• 注目コンテンツを強調： 重要なアイテムやプロモーションに注意を引きます。

• ナビゲーションを改善： 関連アイテムや手順の一連をユーザーに案内します。

利用例：

• 製品のショーケース： 注目の製品や新着商品を表示します。

• 画像ギャラリー： 画像や写真のビジュアルギャラリーを作成します。

• お客様の声： 満足した顧客からの好意的なフィードバックを表示します。

• イベントプロモーション： 今後のイベントや特別オファーを強調します。

CarouselコンポーネントをDynamic Componentsに組み込むことで、コンテンツを効果的に見せ、ユーザーを惹きつける動的で視覚的に魅力的なユーザーインターフェースを作成できます。