This schema snippet is the tutorial carousel example used in several tutorials and examples. It is a simple carousel that can contain up to 4 carousel slides. We have also included the carousel slide schema on this page.

Pre-requisites

The carousel is set up to include up to 4 carousel slide content items. You must also register the carousel slide schema.

How to use

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

When you register the schema as a content type, you can add a visualization with the following URL:

https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/democarouselslideviz.html?api={{vse.domain}}&content={{content.sys.id}}

For more information see the creating a visualization page.

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "$id": "https://schema-examples.com/tutorial-carousel",
  "title": "Tutorial Carousel",
  "description": "The carousel used in the examples. Requires https://schema-example.com/tutorial-carousel-slide to be registered ",
  "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://schema-example.com/tutorial-carousel-slide"
                            ]
                          }
                        }
                      }
                    ],
              "minItems": 1,
              "maxItems": 6
          }
       }
    }
}

You can use this schema on its own, but you probably want to use it as part of the carousel.

{
    "$schema": "http://json-schema.org/draft-07/schema#",
    "$id": "https://schema-examples.com/tutorial-carousel-slide",

    "title": "Tutorial carousel slide",
    "description": "Carousel slide. Used in the tutorial carousel",

    "allOf": [
        {
            "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
        }
    ],

    "type": "object",
    "properties": {
        "image": {
            "title": "Image",
            "description": "Slide image",
            "allOf": [
                { "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link" }
            ]
        },
        "image-alt": {
            "title": "Image alt",
            "description": "Text to show if image is not loaded",
            "type": "string",
            "minLength": 0,
            "maxLength": 255
        },
        "overlaytext": {
            "title": "Overlay text",
            "description": "Text to overlay the image",
            "type": "string",
            "minLength": 0,
            "maxLength": 255
        }

    },
    "propertyOrder": []
}

Content form preview

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

A content item created from the tutorial carousel content type
A content item created from the tutorial carousel content type

Tutorial banner

results matching ""

    No results matching ""