Version 13

     

    This document assumes you understand the basics about tiles. For an overview on tiles — what they are and how they work — refer to Tiles and Tile Styles.

     

    Overview

     

    The Carousel tile (available with the Summer 2014 Jive Cloud release) makes it easy to show a group of images and links in carousel format. You have several ways to control the flow of this carousel. For instance, you can control the speed with which the carousel rotates, the transition type between images, and whether the carousel rotates automatically. You can add this tile to any Jive place (Group, Space, Project).

     

    Carousel Tile Example

     

    carousel-tile.png

    Tile Style Name

     

    The CAROUSEL tile style must be defined in the tile's definition.json file:

     

    "style" : "CAROUSEL"
    
    
    
    
    
    
    
    
    
    

     

    Tutorial

    Refer to Getting Started > Creating a Carousel Tile with the Jive Node SDK for an introductory tutorial.


    JSON Sample Content

     

    The snippet below contains sample JSON for producing the tile above.

     

    1. {
    2. "title": "Scenery Carousel",
    3. "contents": [
    4. {
    5.   "titleText": "Desert",
    6.   "titleLink": "http://www.jivesoftware.com",
    7.    "image": "http://localhost:8090/images/desert.jpg",
    8.    "imageURI": "http://localhost:8090/images/desert.jpg",
    9.    "description": "Desert description"
    10. },
    11. {
    12.    "titleText": "Death Valley",
    13.    "titleLink": "http://www.jivesoftware.com",
    14.    "image": "http://localhost:8090/images/deathvalley.jpg",
    15.    "imageURI": "http://localhost:8090/images/deathvalley.jpg",
    16.    "description": "Death Valley description"
    17. },
    18. {
    19.    "titleText": "Bahamas",
    20.   "titleLink": "http://www.jivesoftware.com",
    21.    "image": "http://localhost:8090/images/bahamas.jpg",
    22.    "imageURI": "http://localhost:8090/images/bahamas.jpg",
    23.    "description": "Bahamas description"
    24. }
    25. ],
    26. "config": {
    27.    "autoplay": true,
    28.    "speed": "medium",
    29.    "previewPane": true,
    30.    "transition": "fade"
    31. }
    32. }

     

    JSON Schema

     

    The JSON schema for the carousel tile is below.

     

    1. {
    2.    "$schema":"http://json-schema.org/draft-03/schema#",
    3.    "title":"Carousel View Style",
    4.    "description":"JSON schema for external updates of tiles using the carousel view style.",
    5.    "type":"object",
    6.    "properties":{
    7.        "title":{
    8.            "type":"string",
    9.            "maxLength":50
    10.        },
    11.        "contents":{
    12.            "required":true,
    13.            "type": [ "array", "string" ],
    14.            "items":{
    15.                "required":true,
    16.                "type":"object",
    17.                "properties":{
    18.                    "titleText":{
    19.                        "required":true,
    20.                        "type":"string",
    21.                        "maxLength":75,
    22.                        "description":"Shown in the alt attribute and in full-screen mode"
    23.                    },
    24.                    "titleLink":{
    25.                        "required":true,
    26.                        "description":"The URL to which the title text will be linked",
    27.                        "type":"string",
    28.                        "format":"uri"
    29.                    },
    30.                    "image":{
    31.                        "required":true,
    32.                        "description": "The URL of image for HTML img tag",
    33.                        "type":"string",
    34.                        "format":"uri"
    35.                    },
    36.                    "imageURI":{
    37.                        "required":false,
    38.                        "description": "The URI of image (statics service)",
    39.                        "type":"string",
    40.                        "format":"uri"
    41.                    },
    42.                    "description":{
    43.                        "description": "Description of the item",
    44.                        "type":"string",
    45.                        "maxLength":250
    46.                    }
    47.                },
    48.                "dropAdditionalProperties": false
    49.            }
    50.        },
    51.        "config": {
    52.            "required":false,
    53.            "type":"object",
    54.            "properties": {
    55.                "autoplay": {
    56.                    "required":true,
    57.                    "description":"Whether to automatically advance the carousel.",
    58.                    "type":"boolean"
    59.                },
    60.                "speed":{
    61.                    "required":false,
    62.                    "description":"Speed of carousel advance. Possible values: fast, medium, slow, custom. If custom, specify speed with delay property.",
    63.                    "type":"string"
    64.                },
    65.                "delay": {
    66.                    "required":false,
    67.                    "description":"If a custom speed is selected, this value is the delay (in seconds) between images.",
    68.                    "type":"integer"
    69.                },
    70.                "previewPane": {
    71.                    "required":true,
    72.                    "description":"Preview pane below current slide.",
    73.                    "type":"boolean"
    74.                },
    75.                "transition":{
    76.                    "required":false,
    77.                    "description":"Transition effect of carousel advance. Possible values: none, fade, slide.",
    78.                    "type":"string"
    79.                }
    80.            }
    81.        },
    82.        "action":{
    83.            "required":false,
    84.            "description":"Object specifying embedded experience context data and/or a fallback URL",
    85.            "type":"object",
    86.            "properties":{
    87.                "text":{
    88.                    "required":false,
    89.                    "description":"Text of the action link",
    90.                    "type":"string",
    91.                    "maxLength":50
    92.                },
    93.                "url":{
    94.                    "required":false,
    95.                    "description": "URL of an alternate (non-embedded) experience",
    96.                    "type":"string",
    97.                    "format":"uri"
    98.                },
    99.                "context":{
    100.                    "required":false,
    101.                    "description":"Context to pass to embedded experience",
    102.                    "type":"object"
    103.                }
    104.            },
    105.            "dropAdditionalProperties": true
    106.        }
    107.    },
    108.    "dropAdditionalProperties": true
    109. }