Component for image attached to thumbnail carousel (amp-image-picker-carousel)

[rudygalfi]

You see this pattern all over the web, particularly on e-commerce sites:

This requests adding such a component to AMP. At a high-level, it can be composed by taking amp-img and amp-carousel and combining them in a way to pass messages between them. In lieu of creating such an inter-component message passing protocol, we need to create a new component.

This needs a fuller design, but in the interest of capturing some basic behaviors, here's a list of initially brainstormed features:

• Display relatively larger primary amp-img
• Ability to display amp-carousel filled with thumbnails (amp-img) near primary amp-img
• Selecting a thumbnail in the carousel updates the primary amp-img
• The primary amp-img is swipeable (but in slides format only not continuously scrollable)
• There is a thumbnail indicator. Updates to the primary image (either thumbnail selection or swipe of primary) causes thumbnail indicator to update. The indicator can be styled (define border). When the indicator needs to update to a thumbnail that's not fully visible, the thumbnail carousel auto-scrolls.
• The thumbnails that are not selected have an "anti-indicator" that can be styled (e.g. add opacity).
• The thumbnail strip can be positioned either above or below the primary. Below is the default.

Notes: Consider making the component more generic by not restricting to amp-img, as described above. The primary object could be anything, provided the space is declared in advance. The thumbnails should still likely be images, but could be anything that would also fit into a pre-declared and contained space.

cc @ericlindley-g

[ericlindley-g]

This feature is now supported with the goToSlide method! Closing this issue, but you can see an example of this mechanic in action at AMP by Example.