---
title: "カルーセルを加えてひっくり返す"
slug: "add-carousel-and-flip"
abstract: "カルーセルやフリップコンポジットをサイトに追加してください。"
---
# カルーセルを加えてひっくり返す

CarouselやFlipは、Tabs、Accordion、Snippetと同様にコンポジットレンダリングです。コンポジットレンダリングは、他のレンダリングからより複雑なレンダリングを合成することを可能にします。

## カルーセルレンダリングを追加してください

カルーセルレンダリングでは、通常は画像と説明やリンクを添えた回転スライドのセットを定義できます。カルーセルはホームページの上部に使われることが多いですが、どのページにも配置可能です。例えば、複数の注目ページを表示したり、ステップバイステップのプロセスを説明したり、商品画像を表示したりできます。カルーセル内のアイテムは、定められた順序で一つずつ表示されます。デフォルトでは、カルーセルレンダリングにはスライド画像とスライドテキストアイテムが含まれています。

![Carousel example](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/75A04ED05DEA49E48382FC3FF2EC0CAA.png)

スライドレイアウト、ナビゲーションタイプ、スライドトランジション効果などを定義することで、カルーセルの外観を決定できます。

各スライドを編集し、テキスト、リンク、画像、動画などの要素を追加・削除することでカスタマイズできます。フローティングツールバーのオプションをクリックすると、テキストや画像を修正できます。

![Use the floating toolbar to edit the carousel](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/61F783B07AEC4EB89815E469D3E75407.png)

キャリーセルレンダリングを追加すると:

1.  カルーセルのレンダリングをページにドラッグ&ドロップします。
2.  **「関連コンテンツ選択**」ダイアログボックスで:
    -   既存のコンテンツ項目を選択するには、「 **既存コンテンツ選択**」をクリックし、希望するコンテンツをクリックしてから **「OK」**をクリックしてください。
        
        例えば、すでにホームページのセクションが準備されている場合、カルーセルは自動的にホームページ内のアイテムで満たされます:
        
        ![Use existing content to fill the carousel](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/AA16497C827E4CF9BE4AA40D1D42E523.png)
        
    -   カルーセル用の新しいコンテンツ項目を作成し、ページ上に直接カルーセルスライドを追加するには、「 **新しいコンテンツを作成** 」をクリックし、「 **OK」をクリックし、**プラスボタンをクリックしてください:
        

## Flipレンダリングを追加してください

Flipレンダリングでは、前面(見える)と背面(隠れ)の2つのアイテムを扱うことができます。この2つのアイテムは、アイテムをクリックしたりカーソルを合わせたりすると交互に表示されます。例えば、スタッフの写真やプロフィール情報、クーポンやリディームコードの表示にはフリップレンダリングが使えます。

Flipレンダリングを追加すると:

1.  Flipレンダリングをページにドラッグ&ドロップします。
2.  **「関連コンテンツ選択**」ダイアログボックスで:
    -   既存のコンテンツ項目を選択するには、「 **既存コンテンツ選択**」をクリックし、希望するコンテンツをクリックして「 **OK」**をクリックしてください。
        
        フリップレンダリングは自動的にコンテンツ項目内のデータで埋められます:
        
    -   新しいコンテンツを追加するには **、「作成」をクリックしてください。**
        
3.  **コントロールプロパティ**のダイアログボックスの**スタイリング**セクションでは、**ホバー時のトランジ**ションや**垂直方向のトラン**ジション・ローテーションなど、さまざまなトランジションモードを選択できます。