Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
rudygalfi opened this issue Aug 12, 2016 · 1 comment

Comments

@rudygalfi
Copy link
Contributor

commented Aug 12, 2016

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

screen shot 2016-08-12 at 11 29 33 am

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 comment has been minimized.

Copy link
Contributor

commented Feb 21, 2017

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
3 participants
You can’t perform that action at this time.