---
title: "Add Carousel and Flip"
slug: "add-carousel-and-flip"
abstract: "Add the carousel or flip composite to your site."
---
# Add Carousel and Flip

Carousel and Flip, like Tabs, Accordion, and Snippet are composite renderings. A composite rendering enables you to compose a more complex rendering from other renderings.

<details>
<summary><h2>Add the Carousel rendering</h2></summary>

The Carousel rendering allows you to define a set of rotating slides – usually images – accompanied by descriptions and links. Carousels are often used at the top of home pages, but you can place them on any page. For example, you can use a carousel to display a number of featured pages, to describe a step–by–step process, or to display product images. The items in a carousel appear one at a time in a defined order. By default, the carousel rendering includes a slide image and a slide text item.

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

You can determine the carousel's appearance by defining the slide layout, navigation type, slide transition effect, and so on.

You can edit each slide and customize it by adding or removing elements (such as texts, links, images, and videos). You can modify the text and image by clicking the options in the floating toolbar.

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

To add the Carousel rendering:

1. Drag and drop the Carousel rendering to the page.
2. In the **Select the Associated Content** dialog box:
    - To select an existing content item, click **Select Existing Content**, click the content item that you want and then click **OK**.

        For example, if you already have a Home Page section ready, the carousel automatically fills with the items in the Home Page:

        ![Use existing content to fill the carousel](https://doc.sitecore.com/api/markdown-image/xp/en/users/sxa/105/sitecore-experience-accelerator/images/AA16497C827E4CF9BE4AA40D1D42E523.png)

    - To create a new content item for the carousel and add carousel slides directly on the page, click **Create New Content** and click **OK,** and then click the plus button:

</details>

<details>
<summary><h2>Add the Flip rendering</h2></summary>

The Flip rendering lets you work with two items: the front (visible) and the back (hidden). These two items are shown alternatively after you either click or hover over the item. For example, you can use the flip rendering for staff member photographs and profile information, or for coupons and redeem codes.

To add the Flip rendering:

1. Drag and drop the Flip rendering to the page.
2. In the **Select the Associated Content** dialog box:
    - To select an existing content item, click **Select Existing Content**, click the content item that you want and click **OK**.

        The flip rendering will automatically fill with the data in the content item:

    - To add new content, click **Create.**
3. In the **Control Properties** dialog box, in the **Styling** section, you can select different transition modes, such as **Transition on hover** and **Transition - Rotate vertically**.

</details>