---
canonical: https://amplience.com/developers/docs/schema-reference/schema-examples/tutorials/carousel/
title: Banner carousel
description: This Amplience tutorial carousel schema snippet is used in several of our examples. The carousel is set up to include up to 6 carousel slide content items.
audience: Developer
image: https://cdn.media.amplience.net/i/ampproduct/carousel-banner-viz-1?w=1200&h=630
image_width: 1200
image_height: 630
date_published: 2022-07-01
date_modified: 2023-06-27
---

# Banner carousel

This schema snippet is the banner carousel example. It is a simple carousel that can contain up to 6 [banners](https://amplience.com/developers/docs/schema-reference/schema-examples/tutorials/banner). If you've worked through the get started wizard in the [developer trial](https://amplience.com/developers/docs/dev-tools/developer-trial) then a carousel and some banners have already been created for you.

## Pre-requisites

The carousel is set up to include up to 6 banner content items. You must also register the [tutorial banner schema](https://amplience.com/developers/docs/schema-reference/schema-examples/tutorials/banner) in order to populate the carousel with content.

## How to use

This example could be extended to include additional content types in the items array.

### Setting up the carousel visualization

When you [register](https://amplience.com/developers/docs/dev-tools/guides-tutorials/content-types) the carousel schema as a content type, add a visualization with the following URL:

```
https://get-started.visualizations.content.amplience.net/?content={{content.sys.id}}&vse={{vse.domain}}
```

This visualization is written in React and can be found in the [repository of examples](https://github.com/amplience/dc-visualization-get-started) used in the [developer trial](https://amplience.com/developers/docs/dev-tools/developer-trial).

For more information about developing visualizations see the [creating a visualization](https://amplience.com/developers/docs/dev-tools/guides-tutorials/visualizations) page.

## Banner carousel

```
{
   "$schema":"http://json-schema.org/draft-07/schema#",
   "$id":"https://schema-examples.com/banner-carousel",
   "title":"Carousel of banners",
   "description":"A carousel that includes an array of banner types. Requires the banner content type to be registered first as a prerequisite",
   "allOf":[
      {
         "$ref":"http://bigcontent.io/cms/schema/v1/core#/definitions/content"
      }
   ],
   "type":"object",
   "properties":{
      "banners":{
         "title":"Carousel banner slides",
         "description":"banners within the carousel",
         "type":"array",
         "minItems":1,
         "maxItems":6,
         "items":{
            "allOf":[
               {
                  "$ref":"http://bigcontent.io/cms/schema/v1/core#/definitions/content-link"
               },
               {
                  "properties":{
                     "contentType":{
                        "title":"Banner Content Type",
                        "enum":[
                           "https://schema-examples.com/tutorial-banner"
                        ]
                     }
                  }
               }
            ]
         }
      }
   }
}
```

## Content form preview

An example of creating a content item using a content type registered from the banner carousel example schema is shown in the image below.

![A content item created from the banner carousel content type](https://cdn.media.amplience.net/i/ampproduct/carousel-banner-viz-1?w=1880&fmt=png 'A content item created from the banner carousel content type')

## Related pages

[Tutorial banner](https://amplience.com/developers/docs/schema-reference/schema-examples/tutorials/banner)