[AC New Features] Different background images for each carousel page

[KesemZ]

Description

The only way to get a background image to fully cover a carousel is to set it at the Adaptive Card level like so:

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.6",
    "body": [
        {
            "type": "Carousel",
            "timer": 5000,
            "pages": [
                {
                    "type": "CarouselPage",
                    "id": "firstCarouselPage",
                    "selectAction": {
                        "type": "Action.OpenUrl",
                        "title": "Click for more information about the first carousel page!",
                        "url": "https://adaptivecards.io/"
                    },
                    "items": [
                        {
                            "type": "Image",
                            "url": "https://adaptivecards.io/content/cats/1.png",
                            "altText": "Cat",
                            "size": "Medium"
                        }
                    ],
                    "rtl": false
                },
                {
                    "type": "CarouselPage",
                    "id": "theSecondCarouselPage",
                    "items": [
                        {
                            "type": "Image",
                            "url": "https://adaptivecards.io/content/cats/2.png",
                            "altText": "Cat with bandana",
                            "size": "Medium"
                        }
                    ],
                    "rtl": false
                },
                {
                    "type": "CarouselPage",
                    "id": "last-carousel-page",
                    "items": [
                        {
                            "type": "Image",
                            "url": "https://adaptivecards.io/content/cats/3.png",
                            "altText": "That's a cool cat!",
                            "size": "Medium"
                        }
                    ],
                    "rtl": false
                }
            ],
            "rtl": false
        }
    ],
    "actions": [
        {
            "type": "Action.OpenUrl",
            "title": "See more",
            "url": "https://adaptivecards.io"
        },
        {
            "type": "Action.OpenUrl",
            "title": "Another action",
            "url": "https://adaptivecards.io"
        }
    ],
    "backgroundImage": {
        "url": "https://user-images.githubusercontent.com/33772802/170362108-d2d1cd44-4aa0-487c-8253-c4f991952acf.svg"
    }
}

Which will look like this:

They can also choose to set the background image at the Carousel level, but that will look like this:

There is currently no way to have a different background image for each page of the carousel.

Describe the solution you'd like

A way to set a background image on each carousel page that covers the entire carousel. Depending on how the carousel is implemented, I could see this being set at the CarouselPage level like this:

               {
                    "type": "CarouselPage",
                    "id": "firstCarouselPage",
                    "backgroundImage": "https://user-images.githubusercontent.com/33772802/170362108-d2d1cd44-4aa0-487c-8253-c4f991952acf.svg",
                    "items": [
                        {
                            "type": "Image",
                            "url": "https://adaptivecards.io/content/cats/1.png",
                            "altText": "Cat",
                            "size": "Medium"
                        }
                    ],
                    "rtl": false
                }, 

The expectation here would be that this background image is only shown on the first carousel page, but covers the entire carousel (same behavior as setting the background image at the Adaptive Card level). The user would then have the option to set a different image on the second, third.... page of the carousel.

If a background image is set at the Adaptive Card level, this should override the background image set at the Carousel Page level. The user should be using one or the other, but not both. Maybe a warning can be shown to warn the user that setting a background image at the AC level will override setting it at the Carousel Page level?

Design

The goal of this feature is to allow users further customizability with their carousel component. Allowing only 1 background image at the AC level does not allow users to show a different one on another page.

Implementation Platforms

• [X] JS
• [ ] .NET WPF
• [ ] Android
• [ ] iOS
• [ ] UWP

[JeanRoca]

Added more information. Please let me know if there are any questions or if more details are needed.