Carousel example
On this page
The carousel sample is a simple example of linked content: content that includes links to external content items. In this case the parent content item is a carousel that links to one or more child items: the carousel slides. This type of content makes it easy to reuse content items. For example, the carousel slides could be used in more than one carousel or grid.
On this page we've included carousel and carousel slide content types and visualizations for both types. We also show you how to register the content types so you can use them to create content. You must register both the carousel and carousel slide before you can create a carousel and add slides to it.
The carousel is one of the content type schema templates included with the schema editor. See schema examples for more details.
The carousel content type
The carousel content type stores the carousel slides in an array of between 1 and 6 items (minItems and maxItems). There are no additional properties included in the carousel.
In many cases when designing linked content such as a carousel or a grid, you'd design the content type so that users would be able to add more than one type of content. So the carousel could include a banner and a video as well as an image, for example. See Content choosers for more information about linking to external content.
In this example we've set up the carousel so that it can contain between 1 and 6 carousel slides, but to allow other types of content to be added you can add additional content types to the enum in the slides property. You'd also need to add the code to render these additional types.
{
"$schema": "http://bigcontent.io/cms/schema/v1/schema#",
"id": "https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/democarousel.json",
"title": "Demo Carousel",
"description": "Carousel",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"slides": {
"title": "Carousel slides",
"description": "slides within the carousel",
"type": "array",
"items": {
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content-link"
},
{
"properties": {
"contentType": {
"title": "Carousel Slides",
"enum": [
"https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/democarouselslide.json"
]
}
}
}
],
"minItems": 1,
"maxItems": 6
}
}
}
}
Registering the carousel content type
To register the carousel content type on the current hub, choose "Content types" from the Development menu, click the "Register Content Type" button and enter the URI in the Content type URI field. If you wish to use the carousel from this example, use the following URI to register it. You will also need to enable it in all the content repositories in which you want to create content from the carousel content type.
https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/democarousel.json
If you want to create your own version of this content type, you can upload your version to a hosting service and update the id field to the URI of its new location. You would then register the content type using the new URI.
Right click to download the carousel content type.
Setting up the content card
To choose the content card, click the "+" icon in the content type card section to choose a card. In the example below we have used the gallery card and mapped each of the 4 images shown on the card to the image of the first 4 carousel slides. image0 on the gallery card is set to /slides/0/image, image1 to /slides/0/image and so on.
Visit Cards for more details on using the built-in cards. For a custom card that cycles through each of the carousel images in turn, see the Custom cards page.
Here's the card for a carousel content item in the Content Library. The gallery card shows 4 carousel slide images in a grid.
Configuring the visualization
For the carousel we have included a visualization that cycles through each slide in turn. To set up the visualization click the "Add a visualization" button, give the visualization a name and enter the following for the visualization URI:
https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/democarouselviz.html?api={{vse.domain}}&content={{content.sys.id}}
The visualization will then be available when you create, view or edit a carousel content item.
Download the visualization for the carousel content type.
The carousel slide
The carousel slide is a simple image that the user chooses using a media chooser. We have included additional properties for image-alt text and a description, but these are not currently used.
{
"$schema": "http://bigcontent.io/cms/schema/v1/schema#",
"id": "https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/democarouselslide.json",
"title": "Demo Carousel slide",
"description": "A carousel slide",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"image": {
"type": "object",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
}
],
"title": "Slide image",
"description": "The image for the carousel slide"
},
"image-alt": {
"type": "string",
"maxLength": 256,
"title": "Image alt text",
"description": "The text shown if the image is not loaded",
"format": "text"
},
"text": {
"type": "string",
"maxLength": 256,
"title": "Overlay text",
"description": "The text shown over the image",
"format": "text"
}
}
}
Registering the carousel slide content type
Register the carousel slide in the same way that you registered the carousel and enter the following URI:
https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/democarouselslide.json
Right click to download the carousel slide content type.
To set up the content card, use the photo built-in card and enter "/image" in the image field to map the carousel slide image to the card.
The visualization for the carousel slide is very simple and just shows the image. When you register the visualization use the following URI:
https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/democarouselslideviz.html?api={{vse.domain}}&content={{content.sys.id}}
Download the carousel slide visualization.
Example content
An example of content created using the carousel content type is shown below. Notice that the content is an array of carousel slides.
{
"@id":"http://content.cms.amplience.com/74e63f17-d336-438c-a402-cea9bfa81632",
" _meta":{
"schema":"https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/ dynamiccontenttutorials/democarousel.json",
"name":"hats-hats-hats-carousel"
},
" slides":[
{
"@id":"http://content.cms.amplience.com/a7b3db34-b17a-4263-8f35- 918670fd72fd",
"@type":"https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/ dynamiccontenttutorials/democarouselslide.json",
"_meta":{
"schema":"https://s3-eu -west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/ democarouselslide.json",
"name":"hat-slide-1"
},
"image":{
"@id":"http://image.cms. amplience.com/50d6d113-67e1-40f0-af44-2f830959d39a",
"_meta":{
"schema":"http:// bigcontent.io/cms/schema/v1/core#/definitions/image-link"
},
"id":"50d6d113-67e1- 40f0-af44-2f830959d39a",
"name":"hat-woman-german",
"endpoint":"ampproduct",
" defaultHost":"cdn.media.amplience.net",
"mediaType":"image"
}
},
{
"@id":"http://content.cms. amplience.com/f4e45689-fdff-40a5-9eb0-d2fc443574fd",
"@type":"https://s3-eu-west- 1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/democarouselslide. json",
"_meta":{
"schema":"https://s3-eu-west-1.amazonaws.com/amp-product/ tutorials/dynamiccontenttutorials/democarouselslide.json",
"name":"hat-slide-2"
},
"image":{
"@id":"http://image.cms.amplience.com/34b14fb4-e590-4d37-b254- 504a4c6c7de9",
"_meta":{
"schema":"http://bigcontent.io/cms/schema/v1/core#/ definitions/image-link"
},
"id":"34b14fb4-e590-4d37-b254-504a4c6c7de9",
"name":"hat -woman-english",
"endpoint":"ampproduct",
"defaultHost":"cdn.media.amplience.net",
"mediaType":" image"
}
},
{
"@id":"http://content.cms.amplience.com/5a59f1a4-0b61-44d2-bdf7- 93d767f6d2b9",
"@type":"https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/ dynamiccontenttutorials/democarouselslide.json",
"_meta":{
"schema":"https://s3-eu -west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/ democarouselslide.json",
"name":"hat-slide-3"
},
"image":{
"@id":"http://image.cms. amplience.com/a76b51d3-0c80-436f-9bb5-a72c46cc5d59",
"_meta":{
"schema":"http:// bigcontent.io/cms/schema/v1/core#/definitions/image-link"
},
"id":"a76b51d3-0c80- 436f-9bb5-a72c46cc5d59",
"name":"hat-woman-french",
"endpoint":"ampproduct",
" defaultHost":"cdn.media.amplience.net",
"mediaType":"image"
}
},
{
"@id":"http://content.cms. amplience.com/f53c210d-9517-4680-af4d-32fab3b16c7e",
"@type":"https://s3-eu-west- 1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/democarouselslide. json",
"_meta":{
"schema":"https://s3-eu-west-1.amazonaws.com/amp-product/ tutorials/dynamiccontenttutorials/democarouselslide.json",
"name":"hat-slide-4"
},
"image":{
"@id":"http://image.cms.amplience.com/d1381a88-24ea-4c1b-87b6- 950e01339a27",
"_meta":{
"schema":"http://bigcontent.io/cms/schema/v1/core#/ definitions/image-link"
},
"id":"d1381a88-24ea-4c1b-87b6-950e01339a27",
"name":" woman-in-hat",
"endpoint":"ampproduct",
"defaultHost":"cdn.media.amplience.net",
"mediaType":" image"
}
}
],
"@type":"https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/ dynamiccontenttutorials/democarousel.json"
}