Skip to main content

Carousel - Simple - Slider or List

List, Slider and Custom

List​

List

A vertically scrollable carousel where each item is displayed one after another in a list format. The user can simply scroll down through the content to view additional items. This layout is best suited when there are many items, and vertical space is readily available.

Slider​

Slider

A horizontally swipable carousel that shows one primary item (or a few items) at a time, allowing the user to swipe left or right to navigate through content. Ideal for image galleries, product highlights, or other scenarios where you want to emphasize one item at a time.

List and Slider - Carousel Data Structure​

The List and Slider Carousel Data Structure is a flexible format for representing data-rich content in a carousel or list layout. It supports various use cases, including product showcases, interactive forms, and detailed descriptions.

  • items (required): An array of objects, where each object represents a single carousel item. Properties include:

    • name (string): The name of this view
    • title (string): The main title of the item.
    • subTitle (array of strings): Supplementary information displayed under the title.
    • images (array of URLs): Images associated with the item.
    • shortDescription (string or HTML): A brief description of the item.
    • description (string or HTML): A detailed description that complements shortDescription.
    • buttons (array): Interactive elements like links or actions. Each button includes:
      • label (string): Button text.
      • type (url | panel | sendMessage ): Defines the button's action.
      • value (string): Used when type = url or type = sendMessage, or type = panel.
    • panels (optional): An array of panels providing additional views or interactions. Each panel supports the above properties but does not include nested items. It is required to have a unqique name

  • hideImageOnMore (boolean): Determines whether the image is hidden when the full description is expanded.

  • process (string): Overrides Handle Response setting - the endpoint can override configuration by returning process:

    • carousel: Display the results in the carousel, bypassing LLM output. No input token cost created by endpoint data. This is the default.
    • LLM: Use the language model to generate a response. Useful when no results are returned.
    • both: Display the carousel and let the LLM add narrative context or comparison. Endpoint data is being sent to both the LLM and to the client carousel. Using the LLM to explain information that is in the carousel

Example:

@app.route("/hockeyplayers", methods=["POST"])
def hockeyp():
    players = {
        "indicator": true,
        "items": [
            {
                "name": "homePanel",
                "title": "Bobby Orr",
                "images": [
                    "https://upload.wikimedia.org/wikipedia/en/9/9e/Bobby_Orr_in_mid-air_%281970%29.jpg",
                    "https://thehockeywriters.com/?attachment_id=34920",
                ],
                "shortDescription": "Bobby Orr is widely acknowledged as one of the greatest hockey players of all time. Known for revolutionizing the position of defenseman, Orr won two Art Ross Trophies, eight consecutive Norris Trophies, and three Hart Trophies.",
                "buttons": [
                    {"label": "Wikipedia", "type": "url", "value": "https://en.wikipedia.org/wiki/Bobby_Orr"},
                    {"label": "Compare", "type": "sendMessage", "value": "Compare Bobby Orr with Wayne Gretzky and Derek Sanderson"},
                    {"label": "More", "type": "panel", "value": "longDescription"},
                ],
                "panels": [{"name":"longDescription", "description": "Bobby Orr longer description goes here.", "buttons": [
                    {"label": "Back", "type": "panel", "value": "homePanel"},
                ]}],
            },
            {
                "title": "Derek Sanderson",
                "images": [
                    "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Derek_Sanderson.jpg/230px-Derek_Sanderson.jpg",
                    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRe8CCb1mn9eZxiFsNC7rEx2lsYtV7fkZ9rFwu0-eVAPDigEb2j",
                ],
                "shortDescription": "Derek Sanderson is a two-time Stanley Cup champion with the Boston Bruins. He set up the overtime goal scored by Bobby Orr that clinched the 1970 Stanley Cup, considered the greatest goal in NHL history.",
                "buttons": [
                    {"label": "Wikipedia", "type": "url", "value": "https://en.wikipedia.org/wiki/Derek_Sanderson"},
                    {"label": "Compare", "type": "sendMessage", "value": "Compare Bobby Orr with Wayne Gretzky and Derek Sanderson"},
                    {"label": "Show More", "type": "panel", "value": "longDescription"},
                ],
                "panels": [{"name":"longDescription", "description": "Derek Sanderson longer description goes here.", "buttons": [
                    {"label": "Back", "type": "panel", "value": "homePanel"},
                ]}],
            },
            {
                "title": "Wayne Gretzky",
                "images": [
                    "https://cdn.britannica.com/12/247612-050-93D291C2/Wayne-Gretzky-Edmonton-Oilers.jpg",
                    "https://upload.wikimedia.org/wikipedia/commons/c/cc/Andrew_Scheer_with_Wayne_Gretzky_%2848055697168%29_%28cropped%29.jpg",
                ],
                "shortDescription": "Wayne Gretzky, known as 'The Great One,' is regarded as the greatest hockey player of all time. He holds the NHL record for career goals, assists, and points, and has won four Stanley Cups with the Edmonton Oilers.",
                "buttons": [
                    {"label": "Wikipedia", "type": "url", "value": "https://en.wikipedia.org/wiki/Wayne_Gretzky"},
                    {"label": "Compare", "type": "sendMessage", "value": "Compare Bobby Orr with Wayne Gretzky and Derek Sanderson"},
                    {"label": "Show More", "type": "panel", "value": "longDescription"},
                ],
                "panels": [{"name":"longDescription", "description": "Wayne Gretzky longer description goes here.", "buttons": [
                    {"label": "Back", "type": "panel", "value": "homePanel"},
                ]}],
            },
        ],
    }
    return players, 200

List of hockey players

tip

This hybrid approach combines the efficiency of structured display with the flexibility of natural language. Remember: Input token don't increase the time, the issue—it’s the time and cost of generating output tokens when LLM has to render all the data. Carousels help you stay responsive, while still allowing rich interaction powered by the LLM.

If you're unsure which process mode to use, start with carousel for data-rich queries. Add both if the LLM can add contextual value (e.g., summarizing, comparing, explaining results). Only use LLM alone when visual display is unnecessary.