Skip to main content

Banner carousel

This schema snippet is the banner carousel example. It is a simple carousel that can contain up to 6 banners. If you've worked through the get started wizard in the developer trial then a carousel and some banners have already been created for you.

Pre-requisites
Link copied!

The carousel is set up to include up to 6 banner content items. You must also register the tutorial banner schema in order to populate the carousel with content.

How to use
Link copied!

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

When you register 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 used in the developer trial.

For more information about developing visualizations see the creating a visualization page.

{
"$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
Link copied!

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

Tutorial banner